<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

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

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : SphinxKnight
 Dernière mise à jour par : SphinxKnight,