From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/fr/web/css/shape-box/index.html | 168 ++++++++++++++++++++++++++++++++++ 1 file changed, 168 insertions(+) create mode 100644 files/fr/web/css/shape-box/index.html (limited to 'files/fr/web/css/shape-box/index.html') diff --git a/files/fr/web/css/shape-box/index.html b/files/fr/web/css/shape-box/index.html new file mode 100644 index 0000000000..ebb643f4c8 --- /dev/null +++ b/files/fr/web/css/shape-box/index.html @@ -0,0 +1,168 @@ +--- +title: +slug: Web/CSS/shape-box +tags: + - CSS + - Reference + - Type +translation_of: Web/CSS/shape-outside +--- +
{{CSSRef}}
+ +

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é {{cssxref("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 {{cssxref("border-radius")}} et {{cssxref("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

+ +

{{EmbedLiveSample('Exemples',"100%","100%")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS Shapes', '#typedef-shape-box', '<shape-box>')}}{{Spec2('CSS Shapes')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FonctionnalitéChromeFirefox (Gecko)Internet ExplorerOperaSafari
Support simple{{compatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{compatVersionUnknown}}
\xx{{compatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{compatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FonctionnalitéAndroidChrome pour AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Support simple{{compatVersionUnknown}}{{compatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{compatVersionUnknown}}
\xx{{compatVersionUnknown}}{{compatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{compatVersionUnknown}}
+
+ +

Voir aussi

+ + -- cgit v1.2.3-54-g00ecf