CSS - Propriété shape-outside
Description de la propriété shape-outside.
Définit la forme d'un élément, celle qui sera contournée par le texte si l'élément est flottant.
Valeurs pour shape-outside.
- shape-outside: none;
L'élément garde sa forme rectangulaire. Équivalent à
margin-box. - shape-outside: margin-box;
Le texte d'habillage (en bleu) contourne l'élément, en incluant les marges.
- shape-outside: border-box;
Le texte d'habillage ignore les marges et contourne l'élément en se calant sur la bordure.
- shape-outside: padding-box;
Le texte d'habillage ignore les marges et la bordure, pour contourner les marges intérieures (padding) de l'élément.
- shape-outside: content-box;
Le texte d'habillage ignore les marges, la bordure et les marges intérieures pour contourner uniquement le contenu de l'élément.
- shape-outside: inset(...); shape-outside: circle(...); shape-outside: ellipse(...); shape-outside: polygon(...);
- shape-outside:
initial;La valeur initiale est
none. -
Reportez-vous à la description générale de ces valeurs.
Simulateur.
shape-outside :
Contenu de
l'élément flottant
l'élément flottant
In hac habitasse platea dictumst. Proin eleifend massa ac ipsum porttitor, et elementum nibh rutrum. Quisque eget vulputate orci, in maximus eros. Sed diam elit, dapibus vel dignissim nec, lobortis at nibh. Proin imperdiet feugiat eleifend. Sed vehicula tincidunt sem, at molestie nulla lobortis et. Duis tincidunt ipsum ut nulla volutpat, eget mollis lectus facilisis. Integer a nulla faucibus eros rutrum finibus et a est. Mauris vehicula, lectus ut ultricies sodales, mi ipsum hendrerit dolor, vel dignissim turpis lorem at arcu. Mauris ac ullamcorper ligula. Aenean ac venenatis lorem. Curabitur ultrices lorem non quam viverra iaculis. Integer aliquam velit et arcu tempus, sed scelerisque lectus imperdiet. Praesent sodales lobortis ligula. In hac habitasse platea dictumst. Proin eleifend massa ac ipsum porttitor, et elementum nibh rutrum. Quisque eget vulputate orci, in maximus eros.
Voir aussi...
Formes géométriques - Propriétés.
clip-path: Définit la partie visible de l'élément, délimitée par une forme géométrique (rectangle, polygone...)
Formes géométriques - Fonctions.
circle(): Définit un cercle.drop-shadow(): Définit l'ombre d'un élément (dimensions, flou, couleur).ellipse(): Définit une ellipse.inset(): Définit un rectangle, utilisable pour découper une image.polygon(): Définit une forme.