Proprietà CSS shape-outside
La proprietà CSS shape-outside consente al contenuto di scorrere attorno a una forma specificata. Scopri i valori e gli esempi.
La proprietà CSS shape-outside definisce una forma attorno alla quale scorre il contenuto inline adiacente (di solito testo). Permette di uscire dal modello rettangolare delle box e di far scorrere il testo lungo un cerchio, un'ellisse, un poligono o persino il contorno di un'immagine.
Per impostazione predefinita, il contenuto inline scorre attorno al margin box rettangolare di un elemento con float. La proprietà shape-outside sostituisce quel rettangolo con una forma personalizzata, in modo che il testo segua curve e angoli invece di bordi retti.
Questa pagina illustra cosa fa shape-outside, i valori che accetta (<basic-shape>, <shape-box> e <image>), esempi eseguibili per ciascuno e le insidie da conoscere per farlo funzionare.
Quando e perché usarla
Usa shape-outside quando vuoi che il testo si adatti a un oggetto non rettangolare — ad esempio, avvolgere un paragrafo attorno a un avatar circolare, una citazione triangolare o una foto di prodotto ritagliata. È una funzionalità puramente visiva e presentazionale: cambia il modo in cui il testo scorre, non la geometria effettiva dell'elemento. L'elemento stesso rimane una box rettangolare.
Tre regole sono essenziali da ricordare:
- L'elemento deve avere il float.
shape-outsideha effetto solo sugli elementi con float (float: leftofloat: right). Viene ignorata sugli elementi privi di float. - L'elemento necessita di larghezza e altezza. Una
<basic-shape>comecircle()viene risolta relativamente alla box dell'elemento, quindi la box deve avere dimensioni esplicite. shape-outsidenon ritaglia l'elemento. Ridisegna solo l'area float che il testo evita. Per ritagliare visivamente la box alla stessa forma, abbinala alla proprietàclip-pathusando la stessa funzione di forma (come si vedrà negli esempi seguenti).
Animazioni e transizioni possono modificare shape-outside quando il valore è una <basic-shape>.
| Valore iniziale | None |
|---|---|
| Si applica a | Qualsiasi elemento. |
| Ereditato | No. |
| Animabile | Sì, come specificato per <basic-shape>. |
| Versione | CSS3 |
| Sintassi DOM | object.style.shapeOutside = "margin-box"; |
Sintassi
shape-outside: none | <shape-box> | <basic-shape> | <image> | initial | inherit;La proprietà complementare shape-margin aggiunge spazio tra la forma e il testo circostante, mentre shape-image-threshold controlla quali pixel di un'immagine vengono considerati quando il valore è un <image>.
Esempio: testo attorno a un'ellisse
La funzione di forma ellipse() accetta due raggi e una posizione opzionale. Nota come clip-path ripeta lo stesso valore affinché la box verde visibile corrisponda alla forma attorno alla quale il testo scorre.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
shape-outside: ellipse(120px 200px at 40% 50%);
clip-path: ellipse(120px 200px at 40% 50%);
width: 300px;
height: 500px;
float: right;
opacity: 0.6;
background-color: #8ebf42;
}
</style>
</head>
<body>
<h2>Shape-outside property example</h2>
<div></div>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</body>
</html>Esempio: testo attorno a un'immagine
Quando il valore è un url() che punta a un'immagine, il browser costruisce la forma dal canale alfa dell'immagine — l'area float segue i pixel non trasparenti (opachi). Funziona solo per le immagini che consentono l'accesso CORS e l'immagine deve avere trasparenza affinché l'effetto sia visibile.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img {
width: 250px;
shape-outside: url("/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg");
}
.left {
float: left;
}
.right {
float: right;
}
</style>
</head>
<body>
<h2>Shape-outside property example</h2>
<img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="tree" class="left" />
<img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="tree" class="right" />
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</body>
</html>Esempio: testo attorno a un poligono
La funzione polygon() accetta un elenco di coppie di coordinate x y che definiscono i vertici della forma. Usala per triangoli, frecce o qualsiasi contorno libero con tre o più punti.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
shape-outside: polygon(0 0, 0 200px, 300px 600px);
clip-path: polygon(0 0, 0 200px, 300px 600px);
width: 300px;
height: 300px;
float: left;
opacity: 0.3;
background-color: #8ebf42;
}
</style>
</head>
<body>
<h2>Shape-outside property example</h2>
<div></div>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</body>
</html>Valori
| Valore | Descrizione |
|---|---|
| none | Nessuna forma applicata. L'area float dell'elemento non viene modificata. |
<shape-box> | L'area float è determinata in base alla forma dei bordi di un elemento con float. <shape-box> può essere uno dei quattro valori: margin-box, border-box, padding-box, content-box. Qualsiasi curvatura inclusa nella forma viene creata dalla proprietà border-radius. |
<basic-shape> | L'area float è determinata da una funzione di forma: inset() per rettangoli rientrati, circle() per cerchi, ellipse() per ellissi e polygon() per qualsiasi forma con tre o più vertici. |
<image> | La forma viene estratta e determinata in base al canale alfa dell'<image> specificata. |
| initial | Imposta il valore predefinito della proprietà. |
| inherit | Eredita la proprietà dall'elemento genitore. |
Insidie comuni
- Non accade nulla se l'elemento non ha il float. È l'errore più comune.
shape-outsideviene silenziosamente ignorata senzafloat: leftofloat: right. - La box appare ancora rettangolare.
shape-outsidemodifica solo l'area float, non l'aspetto dell'elemento. Aggiungi unclip-pathcorrispondente se vuoi che la box venga ritagliata visivamente alla stessa forma. - Le percentuali si risolvono rispetto alla box dell'elemento, quindi un elemento senza altezza (o con un'altezza collassata) non produrrà la forma attesa.
- Usa
shape-marginper creare respiro. Il testo può avvicinarsi troppo al bordo della forma;shape-marginaggiunge uno spazio uniforme.
Supporto browser
shape-outside è supportata in tutti i browser moderni (Chrome, Edge, Firefox, Safari e Opera). Si degrada in modo elegante: in un browser che non la supporta, il testo scorre semplicemente attorno alla box rettangolare dell'elemento.
Proprietà correlate
float— necessario affinchéshape-outsideabbia effetto.border-radius— arrotonda gli angoli del valore<shape-box>, cheshape-outsideseguirà di conseguenza.