La shape-outsideproprietà controlla il modo in cui il contenuto si avvolgerà attorno al riquadro di delimitazione di un elemento flottato. In genere questo è così che il testo può scorrere su una forma come un cerchio, un'ellisse o un poligono:
.element ( float: left; shape-outside: circle(50%); width: 200px; height: 200px; )
È importante notare che questa proprietà funzionerà solo su elementi flottati per ora, anche se è probabile che cambierà in futuro. La shape-outsideproprietà può anche essere manipolata con transizioni o animazioni.
Valori
circle(): per realizzare forme circolari.ellipse(): per realizzare forme ellittiche.inset(): per realizzare forme rettangolari.polygon(): per creare qualsiasi forma con 3 o più vertici.url(): identifica quale immagine deve essere utilizzata per avvolgere il testo.initial: l'area del galleggiante è inalterata.inherit: eredita ilshape-outsidevalore dal genitore.
I seguenti valori identificano quale riferimento del modello box deve essere utilizzato per posizionare la sagoma all'interno:
margin-boxpadding-boxborder-box
Questi valori dovrebbero essere aggiunti alla fine, per esempio: shape-outside: circle(50% at 0 0) padding-box. Per impostazione predefinita margin-boxverrà utilizzato il riferimento.
ellisse()
.element ( shape-outside: ellipse(150px 300px at 50% 50%); )La ellipse()funzione richiede i valori dei raggi per gli assi x, y dell'ellisse seguiti dalle coordinate per posizionare il centro della forma all'interno del riquadro di delimitazione. Ad esempio, l'esempio sopra posizionerà il centro dell'ellisse nel centro verticale e orizzontale del .elementdiv:
Sebbene la demo sopra possa suggerire che stiamo cambiando la forma della divstessa, se aggiungiamo bordi e un'immagine di sfondo scopriremo che il riquadro di delimitazione è in realtà ancora rettangolare:
Potrebbe essere meglio pensarla in questo modo: con la shape-outsideproprietà stiamo cambiando la relazione di altri elementi attorno a un elemento, non la geometria dell'elemento stesso. Per risolvere il problema, dovremo utilizzare shape-outsideinsieme alla clip-path()proprietà, come in questo esempio:
cerchio()
.element ( shape-outside: circle(50%); )Questa funzione crea un cerchio e nell'esempio di codice sopra creerà un cerchio con un raggio che è la metà dell'altezza e della larghezza di .element. La circle()funzione può anche utilizzare la stessa sintassi per posizionare la forma all'interno.
url ()
.element ( shape-outside: url('circle.png.webp'); )In questo caso, abbiamo due immagini flottate, una su entrambi i lati di un blocco di testo. Poiché entrambe le immagini hanno la shape-outsideproprietà impostata, il testo sottostante eviterà quei due float.
È anche possibile impostare la shape-image-thresholdproprietà che informerà il browser su quali pixel, a seconda della loro trasparenza, dovrebbero creare la forma. Per esempio:
.element ( shape-outside: url('image.png.webp'); shape-image-threshold: 0.5; )In questo esempio gli unici pixel che creeranno la forma devono avere una trasparenza del 50% e oltre. I valori da 0.0(trasparente) a 1.0(opaco) sono validi.
poligono()
.element ( shape-outside: polygon(0 0, 0 200px, 300px 600px); )Questa funzione crea qualsiasi forma che abbia tre o più vertici, ad esempio:
È importante notare che se questa proprietà deve essere animata, richiede lo stesso numero di vertici quando si dichiara lo stato animato:
.element ( shape-outside: polygon(0 0, 100% 0, 100% 100%, 0 100%); transition: shape-outside 1s; ) .element:hover ( shape-outside: polygon(0 0, 100% 50%, 100% 50%, 0 100%); )inserto ()
.element ( shape-outside: inset(100px 100px 100px 100px 10px); /* shape-outside: inset(top right bottom left border-radius); */ )inset()è una funzione per creare forme rettangolari, richiede cinque parametri ma il quinto, perché border-radiusè opzionale. Gli altri argomenti sono offset verso l'interno dal bordo di .element:
Sopra abbiamo un elemento di 200 px di larghezza per 200 px di altezza e stiamo spostando la forma entro 50 px in ogni direzione tranne il lato sinistro. In questo modo il testo andrà a capo sopra la forma anche se il div si estende verso l'alto.
Supporto del browser
Questi dati di supporto del browser provengono da Caniuse, che ha più dettagli. Un numero indica che il browser supporta la funzione a quella versione e successive.
Desktop
| Cromo | Firefox | IE | Bordo | Safari |
|---|---|---|---|---|
| 37 | 62 | No | 79 | 7.1 * |
Mobile / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 8 * |