Cette page a été traduite à partir de l'anglais par la communauté. Vous pouvez également contribuer en rejoignant la communauté francophone sur MDN Web Docs.

<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

Spécification État Commentaires
CSS Shapes Module Level 1
La définition de '<shape-box>' dans cette spécification.		 Candidat au statut de recommandation Définition initiale.

Compatibilité des navigateurs

Nous convertissons les données de compatibilité dans un format JSON. Ce tableau de compatibilité utilise encore l'ancien format car nous n'avons pas encore converti les données qu'il contient. Vous pouvez nous aider en contribuant ! (en-US)

Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Opera Safari
Support simple (Oui) Pas de support Pas de support Pas de support (Oui)
\xx (Oui) Pas de support Pas de support Pas de support (Oui)
Fonctionnalité Android Chrome pour Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Support simple (Oui) (Oui) Pas de support Pas de support Pas de support (Oui)
\xx (Oui) (Oui) Pas de support Pas de support Pas de support (Oui)

Voir aussi