<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
etmargin
. Si le ratioborder-radius
/margin
est supérieur ou égal à 1, le rayon du coin de la boîte seraborder-radius
+margin
. Si le ratioborder-radius / margin
est inférieur à 1, le rayon du coin de la boîte seraborder-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
etborder-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) |