MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

Cette fonction est expérimentale
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.

La propriété shape-outside utilise une valeur de forme pour définir la zone de flottement dans laquelle « coule » le contenu en ligne (la forme est alors utilisée plutôt que la boîte englobante).

/* Valeurs avec un mot-clé */
shape-outside: none;
shape-outside: margin-box;
shape-outside: content-box;
shape-outside: border-box;
shape-outside: padding-box;

/* Valeurs utilisant une fonction */
shape-outside: circle();
shape-outside: ellipse();
shape-outside: inset(10px 10px 10px 10px);
shape-outside: polygon(10px 10px, 20px 20px, 30px 30px);
shape-outside: linear-gradient(45deg, rgba(255,255,255,0) 150px, red 150px);

/* Valeur de type <url> */
shape-outside: url(image.png);

/* Valeurs globales */
shape-outside: initial;
shape-outside: inherit;
shape-outside: unset;

Valeur initialenone
Applicabilitéflottants
Héritéenon
Médiavisuel
Valeur calculéecomme défini pour basic-shape (avec shape-box qui suit s'il est utilisé), l'image avec son URI rendue absolue, sinon, comme spécifié.
Type d'animationoui, comme spécifié pour basic-shape, sinon, non
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

Syntaxe

Valeurs

none
La zone de flottement n'est pas modifiée.
<shape-box>
La forme est calculée selon 'margin-box', 'border-box', 'padding-box' or 'content-box' qui correspondent chacune aux boîtes de marge, bordure, remplissage et de contenu. La boîte ainsi définie inclue les courbures induites par border-radius. On a un effet semblable à background-clip.
<basic-shape>
La forme est calculée selon une valeur parmi 'inset()', 'circle()', 'ellipse()' ou 'polygon()'. Si une valeur <shape-box> est fournie, cela définira la boîte de référence dans laquelle appliquée la forme définie avec la fonction <basic-shape>. Si <shape-box> n'est pas fournie, la valeur par défaut sera 'margin-box'.
<image>
La forme est extraite et calculée à partir du canal alpha de l'image image en utilisant l propriété shape-image-threshold.
Les agents utilisateurs doivent utiliser la méthoe fetch, éventuellement avec CORS pour les URL utilisées dans shape-outside. Lors de l'accès à la ressource, les agents utilisateurs doivent utiliser le mode Anonymous et définir la source du referrer comme l'URL de la feuille de style, l'origine de l'URL doit être celle du document. S'il y a des erreurs réseau empêchant de récupérer l'image, l'effet sera le même que celui obtenu avec la valeur none.

Interpolation

Afin de pouvoir interpoler entre deux formes, on appliquera les règles suivantes. Les valeurs avec des fonctions sont interpolées comme une liste simple. Les valeurs d'une liste sont interpolées comme des longueurs, des pourcentages ou des valeurs calculées lorsque c'est possible. Si les valeurs de la liste n'ont pas ces types mais sont identiques (par exemple, on trouve nonzero à la même position dans les deux listes), les valeurs pourront interopérer.

  • Les deux formes doivent utiliser la même boîtes de référence.
  • Si les deux formes sont du même type, que ce type est ellipse() ou circle() et qu'aucun des rayons n'utilise les mots-clés closest-side ou farthest-side, on aura une interpolation entre chaque valeur.
  • Si les deux formes sont du type inset(), on aura une interpolation entre chaque valeur.
  • Si les deux formes sont du types polygon(), que les deux polygones ont le même nombre de côtés et utilisent la même règle <fill-rule>, on aura une interpolation entre chaque valeur.
  • Dans les autres cas, on n'a pas d'interpolation définie.

Syntaxe formelle

none | <shape-box> || <basic-shape> | <image>


<shape-box> = <box> | margin-box
<basic-shape> = <inset()> | <circle()> | <ellipse()> | <polygon()>
<image> = <url> | <image()> | <image-set()> | <element()> | <cross-fade()> | <gradient>


<box> = border-box | padding-box | content-box
<inset()> = inset( <length-percentage>{1,4} [ round <border-radius> ]? )
<circle()> = circle( [ <shape-radius> ]? [ at <position> ]? )
<ellipse()> = ellipse( [ <shape-radius>{2} ]? [ at <position> ]? )
<polygon()> = polygon( <fill-rule>? , [ <length-percentage> <length-percentage> ]# )
<image()> = image( [ [ <image> | <string> ]? , <color>? ]! )
<image-set()> = image-set( <image-set-option># )
<element()> = element( <id-selector> )
<cross-fade()> = cross-fade( <cf-mixing-image> , <cf-final-image>? )
<gradient> = <linear-gradient()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()>


<length-percentage> = <length> | <percentage>
<shape-radius> = <length-percentage> | closest-side | farthest-side
<position> = [[ left | center | right | top | bottom | <length-percentage> ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] | [ center | [ left | right ] <length-percentage>? ] && [ center | [ top | bottom ] <length-percentage>? ]]
<fill-rule> = nonzero | evenodd
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
<image-set-option> = [ <image> | <string> ] <resolution>
<cf-mixing-image> = <percentage>? && <image>
<cf-final-image> = <image> | <color>
<linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )
<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )
<radial-gradient()> = radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )
<repeating-radial-gradient()> = repeating-radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )


<rgb()> = rgb( [ [ <percentage>{3} | <number>{3} ] [ / <alpha-value> ]? ] | [ [ <percentage>#{3} | <number>#{3} ] , <alpha-value>? ] )
<rgba()> = rgba( [ [ <percentage>{3} | <number>{3} ] [ / <alpha-value> ]? ] | [ [ <percentage>#{3} | <number>#{3} ] , <alpha-value>? ] )
<hsl()> = hsl( [ <hue> <percentage> <percentage> [ / <alpha-value> ]? ] | [ <hue>, <percentage>, <percentage>, <alpha-value>? ] )
<hsla()> = hsla( [ <hue> <percentage> <percentage> [ / <alpha-value> ]? ] | [ <hue>, <percentage>, <percentage>, <alpha-value>? ] )
<side-or-corner> = [ left | right ] || [ top | bottom ]
<color-stop-list> = <color-stop>#{2,}
<ending-shape> = circle | ellipse
<size> = closest-side | farthest-side | closest-corner | farthest-corner | <length> | <length-percentage>{2}


<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>
<color-stop> = <color> <length-percentage>?

Exemples

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>

CSS

.main {
  width: 500px;
}

.left,
.right {
  width: 40%;
  height: 12ex;
  background-color: lightgray;
}

.left {
  -webkit-shape-outside: polygon(0 0, 100% 100%, 0 100%);
  shape-outside: polygon(0 0, 100% 100%, 0 100%);
  float: left;
  -webkit-clip-path: polygon(0 0, 100% 100%, 0 100%);
  clip-path: polygon(0 0, 100% 100%, 0 100%);
}

.right {
  -webkit-shape-outside: polygon(100% 0, 100% 100%, 0 100%);
  shape-outside: polygon(100% 0, 100% 100%, 0 100%);
  float: right;
  -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

p {
  text-align: center;
}

Résultat

Spécifications

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

Compatibilité des navigateurs

Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Support simple 37 Pas de support[1] Pas de support 24 8.0 -webkit
<gradient> ? Pas de support Pas de support ? ?
inset() ? Pas de support[2] Pas de support ? ?
polygon() ? Pas de support[3] Pas de support ? ?
Fonctionnalité Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Support simple Pas de support Pas de support[1] Pas de support Pas de support 8.0 -webkit
<gradient> Pas de support Pas de support Pas de support Pas de support ?
inset() Pas de support Pas de support[2] Pas de support Pas de support ?
polygon() Pas de support Pas de support[3] Pas de support ? ?

[1] Cette fonctionnalité est implémentée derrière la préférence layout.css.shape-outside.enabled qui est désactivée par défaut depuis Gecko 53.0 (Firefox 53 / Thunderbird 53 / SeaMonkey 2.50) qui prend uniquement en charge les valeursde type <shape-box> (cf. bug 1309467), circle() (cf. bug 1311244), et ellipse() (cf. bug 1326406). Pour l'implémentation générale, cf. bug 1098939.

[2] Depuis Gecko 54.0 ((Firefox 54 / Thunderbird 54 / SeaMonkey 2.51)), les valeurs utilisant la notation fonctionnelle inset() sont prises en charge via la préférence layout.css.shape-outside.enabled (désactivée par défaut).

[3] Depuis Gecko 55.0 ((Firefox 55 / Thunderbird 55 / SeaMonkey 2.52), les valeurs utilisant la notation fonctionnelle polygon() sont prises en charge via la préférence layout.css.shape-outside.enabled (désactivée par défaut).

Voir aussi

Étiquettes et contributeurs liés au document

 Contributeurs à cette page : SphinxKnight, teoli, Sebastianz, lbelavoir
 Dernière mise à jour par : SphinxKnight,