La shape-outsidepropriété contrôle la façon dont le contenu s'enroulera autour de la boîte englobante d'un élément flottant. En règle générale, c'est pour que le texte puisse être redistribué sur une forme telle qu'un cercle, une ellipse ou un polygone:
.element ( float: left; shape-outside: circle(50%); width: 200px; height: 200px; )
Il est important de noter que cette propriété ne fonctionnera que sur les éléments flottants pour le moment, bien que cela soit susceptible de changer à l'avenir. La shape-outsidepropriété peut également être manipulée avec des transitions ou des animations.
Valeurs
circle(): pour créer des formes circulaires.ellipse(): pour créer des formes elliptiques.inset(): pour créer des formes rectangulaires.polygon(): pour créer n'importe quelle forme avec 3 sommets ou plus.url(): identifie l'image à utiliser pour envelopper le texte.initial: la zone flottante n'est pas affectée.inherit: hérite de lashape-outsidevaleur du parent.
Les valeurs suivantes identifient la référence du modèle de boîte à utiliser pour positionner la forme à l'intérieur:
margin-boxpadding-boxborder-box
Ces valeurs doivent être ajoutées à la fin, par exemple: shape-outside: circle(50% at 0 0) padding-box. Par défaut, la margin-boxréférence sera utilisée.
ellipse()
.element ( shape-outside: ellipse(150px 300px at 50% 50%); )La ellipse()fonction requiert les valeurs de rayon pour les axes x, y de l'ellipse suivies des coordonnées pour positionner le centre de la forme dans son cadre de délimitation. Par exemple, l'exemple ci-dessus positionnera le centre de l'ellipse au centre vertical et horizontal du .elementdiv:
Bien que la démo ci-dessus puisse suggérer que nous changeons la forme de divlui - même, si nous ajoutons des bordures et une image d'arrière-plan, nous constaterons que la boîte englobante est en fait toujours rectangulaire:
Il vaut peut-être mieux y penser de cette façon: avec la shape-outsidepropriété, nous modifions la relation des autres éléments autour d'un élément, pas la géométrie de l'élément lui-même. Pour résoudre ce problème, nous devrons utiliser shape-outsideavec la clip-path()propriété, comme dans cet exemple:
cercle()
.element ( shape-outside: circle(50%); )Cette fonction crée un cercle, et dans l'exemple de code ci-dessus, elle créera un cercle avec un rayon égal à la moitié de la hauteur et de la largeur de .element. La circle()fonction peut également utiliser la même syntaxe pour positionner la forme à l'intérieur.
URL ()
.element ( shape-outside: url('circle.png.webp'); )Dans ce cas, nous avons deux images flottantes, une de chaque côté d'un bloc de texte. Puisque les deux images ont la shape-outsidepropriété définie, le texte en dessous évitera ces deux flottants.
Il est également possible de définir la shape-image-thresholdpropriété qui indiquera au navigateur quels pixels, en fonction de leur transparence, doivent créer la forme. Par exemple:
.element ( shape-outside: url('image.png.webp'); shape-image-threshold: 0.5; )Dans cet exemple, les seuls pixels qui créeront la forme doivent avoir une transparence de 50% et plus. Les valeurs de 0.0(transparent) à 1.0(opaque) sont valides.
polygone()
.element ( shape-outside: polygon(0 0, 0 200px, 300px 600px); )Cette fonction crée toute forme comportant trois sommets ou plus, par exemple:
Il est important de noter que si cette propriété doit être animée, elle nécessite le même nombre de sommets lorsque vous déclarez l'état animé:
.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%); )encart ()
.element ( shape-outside: inset(100px 100px 100px 100px 10px); /* shape-outside: inset(top right bottom left border-radius); */ )inset()est une fonction pour créer des formes rectangulaires, elle prend cinq paramètres mais le cinquième, pour border-radiusest facultatif. Les autres arguments sont des décalages vers l'intérieur à partir du bord de .element:
Au-dessus, nous avons un élément de 200 pixels de large sur 200 pixels de haut et nous compensons la forme de 50 pixels dans toutes les directions sauf le côté gauche. De cette façon, le texte sera enveloppé au-dessus de la forme même si le div s'étend vers le haut.
Prise en charge du navigateur
Ces données de support de navigateur proviennent de Caniuse, qui contient plus de détails. Un nombre indique que le navigateur prend en charge la fonctionnalité dans cette version et plus.
Bureau
| Chrome | Firefox | C'EST À DIRE | Bord | Safari |
|---|---|---|---|---|
| 37 | 62 | Non | 79 | 7,1 * |
Mobile / tablette
| Chrome Android | Android Firefox | Android | Safari sur iOS |
|---|---|---|---|
| 88 | 85 | 81 | 8 * |