From 39f2114f9797eb51994966c6bb8ff1814c9a4da8 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 12:36:08 +0100 Subject: unslug fr: move --- files/fr/web/css/shape-box/index.html | 169 ---------------------------------- 1 file changed, 169 deletions(-) delete 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 deleted file mode 100644 index de7ad2607a..0000000000 --- a/files/fr/web/css/shape-box/index.html +++ /dev/null @@ -1,169 +0,0 @@ ---- -title: -slug: Web/CSS/shape-box -tags: - - CSS - - Reference - - Type -translation_of: Web/CSS/shape-outside -translation_of_original: Web/CSS/shape-box ---- -
{{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