Propriété CSS shape-outside
La propriété CSS shape-outside permet au contenu de se disposer autour d'une forme définie. Découvrez les valeurs et des exemples.
La propriété CSS shape-outside définit une forme autour de laquelle le contenu en ligne adjacent (généralement du texte) vient s'enrouler. Elle permet de sortir du modèle de boîte rectangulaire et de faire couler le texte le long d'un cercle, d'une ellipse, d'un polygone, ou même de la silhouette d'une image.
Par défaut, le contenu en ligne s'enroule autour de la boîte de marge rectangulaire d'un élément flottant. La propriété shape-outside remplace ce rectangle par une forme personnalisée, de sorte que le texte suit des courbes et des angles plutôt que des bords droits.
Cette page explique ce que fait shape-outside, les valeurs qu'elle accepte (<basic-shape>, <shape-box> et <image>), des exemples exécutables pour chacune, ainsi que les pièges à éviter pour qu'elle fonctionne correctement.
Quand et pourquoi l'utiliser
Utilisez shape-outside lorsque vous souhaitez que le texte épouse un objet non rectangulaire — par exemple, enrouler un paragraphe autour d'un avatar circulaire, d'une citation triangulaire ou d'une photo de produit découpée. C'est une fonctionnalité purement visuelle et de présentation : elle modifie la façon dont le texte coule, et non la géométrie réelle de l'élément. L'élément lui-même reste une boîte rectangulaire.
Trois règles sont essentielles à retenir :
- L'élément doit être flottant.
shape-outsiden'a d'effet que sur les éléments flottants (float: leftoufloat: right). Elle est ignorée sur les éléments qui ne sont pas flottants. - L'élément doit avoir une largeur et une hauteur. Un
<basic-shape>commecircle()est résolu par rapport à la boîte de l'élément, donc la boîte doit avoir des dimensions explicites. shape-outsidene découpe pas l'élément. Elle ne fait que remodeler la zone flottante que le texte évite. Pour rogner visuellement la boîte à la même forme, associez-la à la propriétéclip-pathen utilisant la même fonction de forme (vous verrez cela dans les exemples ci-dessous).
Les animations et les transitions peuvent manipuler shape-outside lorsque la valeur est un <basic-shape>.
| Valeur initiale | None |
|---|---|
| S'applique à | Tout élément. |
| Héritée | Non. |
| Animatable | Oui, comme spécifié pour <basic-shape>. |
| Version | CSS3 |
| Syntaxe DOM | object.style.shapeOutside = "margin-box"; |
Syntaxe
shape-outside: none | <shape-box> | <basic-shape> | <image> | initial | inherit;La propriété complémentaire shape-margin ajoute un espace entre la forme et le texte qui l'entoure, et shape-image-threshold contrôle quels pixels d'une image sont pris en compte lorsque la valeur est une <image>.
Exemple : enrouler du texte autour d'une ellipse
La fonction de forme ellipse() prend deux rayons et une position facultative. Notez que clip-path répète la même valeur afin que la boîte verte visible corresponde à la forme autour de laquelle le texte s'enroule.
<!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>Exemple : enrouler du texte autour d'une image
Lorsque la valeur est un url() pointant vers une image, le navigateur construit la forme à partir du canal alpha de l'image — la zone flottante suit les pixels non transparents (opaques). Cela ne fonctionne qu'avec des images autorisant l'accès CORS, et l'image doit avoir de la transparence pour que l'effet soit visible.
<!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>Exemple : enrouler du texte autour d'un polygone
La fonction polygon() accepte une liste de paires de coordonnées x y qui définissent les sommets de la forme. Utilisez-la pour des triangles, des flèches ou tout contour libre à trois points ou plus.
<!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>Valeurs
| Valeur | Description |
|---|---|
| none | Aucune forme n'est appliquée. La zone flottante de l'élément n'est pas affectée. |
<shape-box> | La zone flottante est déterminée selon la forme des bords d'un élément flottant. <shape-box> peut prendre l'une des quatre valeurs : margin-box, border-box, padding-box, content-box. Toute courbure incluse dans la forme est créée par la propriété border-radius. |
<basic-shape> | La zone flottante est déterminée par une fonction de forme : inset() pour les rectangles inscrits, circle() pour les cercles, ellipse() pour les ellipses, et polygon() pour toute forme à trois sommets ou plus. |
<image> | La forme est extraite et déterminée à partir du canal alpha de l'<image> spécifiée. |
| initial | Applique la valeur par défaut de la propriété. |
| inherit | Hérite la propriété de son élément parent. |
Pièges courants
- Rien ne se passe si l'élément n'est pas flottant. C'est l'erreur la plus fréquente.
shape-outsideest ignorée silencieusement sansfloat: leftoufloat: right. - La boîte semble toujours rectangulaire.
shape-outsidene modifie que la zone flottante, pas l'apparence de l'élément. Ajoutez unclip-pathcorrespondant si vous souhaitez aussi rogner visuellement la boîte à la forme. - Les pourcentages sont résolus par rapport à la boîte de l'élément, donc un élément sans hauteur (ou avec une hauteur nulle) ne produira pas la forme attendue.
- Utilisez
shape-marginpour laisser de l'espace. Le texte peut se coller contre le bord de la forme ;shape-marginajoute un espace uniforme.
Compatibilité des navigateurs
shape-outside est pris en charge par tous les navigateurs modernes (Chrome, Edge, Firefox, Safari et Opera). La dégradation est élégante : dans un navigateur qui ne le prend pas en charge, le texte s'enroule simplement autour de la boîte rectangulaire de l'élément.
Propriétés associées
float— requis pour queshape-outsideprenne effet.border-radius— arrondit les coins de la valeur<shape-box>, queshape-outsidesuivra ensuite.