<shape-box>

Le type de donnée CSS <shape-box> permet de définir des formes relatives aux boîtes de l'élément (voir le modèle de boîtes), notamment pour la propriété shape-outside.

Valeurs

margin-box

La forme correspond à la forme dessinée par le contour extérieur de la boîte de marge. Les rayons des coins de la forme sont définis grâce aux propriétés border-radius et margin. Si le ratio border-radius / margin est supérieur ou égal à 1, le rayon du coin de la boîte sera border-radius + margin. Si le ratio border-radius / margin est inférieur à 1, le rayon du coin de la boîte sera border-radius + (margin * (1 + (ratio-1)^3)).

border-box

La forme correspond à la forme dessinée par le contour extérieur de la boîte de bordure. Elle suit donc les règles normales de mise en forme de la bordure (notamment pour les coins arrondis).

padding-box

La forme correspond à la forme dessinée par le contour extérieur de la boîte de remplissage (padding). Elle suit les règles normales de mise en forme de la bordure (notamment pour les coins arrondis).

content-box

La forme correspond à la forme dessinée par le contour extérieur de la boîte de contenu. Le rayon de chaque coin correspondra à la valeur maximale entre 0 et border-radius - border-width - padding.

Exemples

CSS

.main {
    width: 500px;
    height: 200px;
}

.left {
    -webkit-shape-outside: polygon(0 0, 100% 100%, 0 100%);
    float: left;
    width: 40%;
    height: 12ex;
    background-color: lightgray;
    -webkit-clip-path: polygon(0 0, 100% 100%, 0 100%);
}

.right {
    -webkit-shape-outside: polygon(100% 0, 100% 100%, 0 100%);
    float: right;
    width: 40%;
    height: 12ex;
    background-color: lightgray;
    -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

p {
    text-align: center;
}

HTML

<div class="main">
    <div class="left"></div>
    <div class="right"></div>
    <p>
      Sometimes a web page's text content appears to be
      funneling your attention towards a spot on the page
      to drive you to follow a particular link. Sometimes
      you don't notice.
    </p>
</div>

Résultat

Spécifications

Compatibilité des navigateurs

Voir aussi

• shape-outside
• Le modèle de boîtes CSS