CSS shape-outside
La proprietà CSS3 shape-outside controlla la forma del flusso testuale
La proprietà shape-outside permette al testo di adattarsi a una forma personalizzata, come cerchi, ellissi o poligoni, attorno a un elemento float.
Per essere visivamente coerente, è spesso combinata con clip-path per ritagliare l'elemento nella stessa forma.
Sintassi
shape-outside: valore;
Valori accettati
- circle(): definisce una forma circolare, specificando raggio e centro.
- ellipse(): definisce un'ellisse, specificando i raggi orizzontale e verticale.
-
inset(): crea un rettangolo, con la possibilità di aggiungere bordi smussati (via
border-radiusopzionale). - polygon(): consente di disegnare forme personalizzate tramite una lista di coordinate (x, y).
-
url(): utilizza un'immagine, tipicamente in PNG (Esempio:
shape-outside: url("forma.png");) per definire la forma, le aree opache determinano il contorno. Può essere regolato tramiteshape-image-threshold. -
box valori:
margin-box,border-box,padding-box,content-box— usano la corrispondente area di layout dell’elemento come forma.
Nota: la proprietà shape-outside ha effetto solo se l’elemento ha float diverso da none.
Esempio proprietà: shape-outside
Codice Esempio: shape-outside
.circle-float {
float: left;
width: 200px;
height: 200px;
shape-outside: circle(50%);
clip-path: circle(50%);
margin: 20px;
background-image: url('https://placehold.co/200x200/ff0000/FFFFFF/png');
background-size: cover;
}
Contenuto Esempio: shape-outside
Esempio di utilizzo di shape-outside
In questo esempio, il testo fluisce attorno a un'immagine con forma circolare definita da shape-outside: circle().
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vitae dignissim mauris. Nulla facilisi. Aenean id commodo augue. In hac habitasse platea dictumst. Quisque porta porta eros, ut pretium felis tincidunt sed. Suspendisse potenti. Curabitur rhoncus dui vitae orci convallis, id elementum magna sodales. Sed sit amet magna quam. Mauris non dapibus libero.
CSS e HTML per creare un wrapping circolare:
<style>
.circle-float {
float: left;
width: 200px;
height: 200px;
shape-outside: circle(50%);
clip-path: circle(50%);
margin: 20px;
background-image: url('https://placehold.co/200x200/ff0000/FFFFFF/png');
background-size: cover;
}
</style>
<div class="circle-float"></div>
<p>
Testo che fluisce attorno alla forma circolare...
</p>
Note:
Le indicazioni dei Browser supportati sono superate grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.
Supporto Browser
IP: 216.73.216.108
