Come arrotondare gli angoli quando si usa il percorso clip CSS

Voglio poter completare i 3 angoli più a sinistra su questa forma che ho creato, qualche idea su come si possa fare?Come arrotondare gli angoli quando si usa il percorso clip CSS

div{ 
 
    position: absolute; 
 
    z-index: 1; 
 
    width: 423px; 
 
    height: 90px; 
 
    background-color: #b0102d; 
 
    color: white; 
 
    right: 0; 
 
    margin-top: 10vw; 
 
    -webkit-clip-path: polygon(100% 0%, 100% 50%, 100% 100%, 25% 100%, 0% 50%, 25% 0%); 
 
clip-path: polygon(100% 0%, 100% 50%, 100% 100%, 25% 100%, 0% 50%, 25% 0%); 
 
}

<div></div>

fonte

2015-08-01 Eduardo Hernandez

http://bennettfeely.com/clippy/ –

sì, quello che ho usato per fare la forma, ma io non so come arrotondare gli angoli. Qualche idea? –

Sospetto che dovresti seguire il percorso del percorso della clip SVG. Non credo che 'polygon' supporti le curve. - http://sarasoueidan.com/blog/css-svg-clipping/ –

Non ho un commento opzione sì, così sto scrivendo come una risposta ..

è necessario scrivere il maggior numero di punti possibili per arrotondare il angolo. Nothig altro ... per, ad esempio un paio di punti per rendere più bassa po 'parte più rotondo:

-webkit-clip-path: polygon(100% 0%, 100% 100%, 100% 100%, 25% 100%, 5% 70%,1% 60%, 0% 50%, 25% 0%);

oh, sì, o SVG come commento gente qui .. :)

fonte

2015-08-01 19:48:17

Si può anche fare un giro con il cerchio per ottenere alcuni effetti diversi.

-webkit-clip-path: circle(60.0% at 50% 10%); 
clip-path: circle(50.0% at 50% 50%);

Codepen

Peccato che non è possibile combinare il poligono e cerchio ... o forse si può e non ho giocato intorno con esso abbastanza per capirlo. HTH

fonte

2016-12-13 17:15:25

-1

Creare una clip rettangolare e posizionare un rettangolo spesso con un bordo arrotondato su di esso. Buona fortuna!

fonte

2017-12-02 11:16:50

Come arrotondare gli angoli quando si usa il percorso clip CSS

risposta

Problemi correlati