shape-outside

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

* Some parts of this feature may have varying levels of support.

La propriété shape-outside définit une forme (qui peut ne pas être un rectangle) autour de laquelle le contenu en ligne devra « s'écouler ». Par défaut, le contenu en ligne évolue autour de la boîte de marge de l'élément flottant. La propriété shape-outside permet de personnaliser ce contour et d'obtenir un texte qui s'écoule autour d'objets plus complexes que des rectangles.

Exemple interactif

shape-outside: circle(50%);

shape-outside: ellipse(130px 140px at 20% 20%);

shape-outside: url(/shared-assets/images/examples/round-balloon.png);

shape-outside: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);

<section class="default-example" id="default-example">
  <div class="example-container">
    <img
      class="transition-all"
      id="example-element"
      src="/shared-assets/images/examples/round-balloon.png"
      width="150" />
    We had agreed, my companion and I, that I should call for him at his house,
    after dinner, not later than eleven o’clock. This athletic young Frenchman
    belongs to a small set of Parisian sportsmen, who have taken up “ballooning”
    as a pastime. After having exhausted all the sensations that are to be found
    in ordinary sports, even those of “automobiling” at a breakneck speed, the
    members of the “Aéro Club” now seek in the air, where they indulge in all
    kinds of daring feats, the nerve-racking excitement that they have ceased to
    find on earth.
  </div>
</section>

.example-container {
  text-align: left;
  padding: 20px;
}

#example-element {
  float: left;
  width: 150px;
  margin: 20px;
}

Syntaxe

css

/* 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);

/* Valeur de type <gradient> */
shape-outside: linear-gradient(45deg, rgba(255, 255, 255, 0) 150px, red 150px);

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

Valeurs

none: La zone de flottement n'est pas modifiée. Le contenu en ligne épouse le contour de la boîte de marge normalement.
<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>: Une valeur de type <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éthode 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.

Définition formelle

Valeur initiale	`none`
Applicabilité	flottants
Héritée	non
Valeur calculée	comme 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'animation	oui, comme spécifié pour `<basic-shape>`, sinon, non

Syntaxe formelle

shape-outside = 
  none                              |
  [ <basic-shape> || <shape-box> ]  |
  <image>                           

<shape-box> = 
  <visual-box>  |
  margin-box    

<image> = 
  <url>       |
  <gradient>  

<visual-box> = 
  content-box  |
  padding-box  |
  border-box   

<url> = 
  <url()>  |
  <src()>  

<url()> = 
  url( <string> <url-modifier>* )  |
  <url-token>                      

<src()> = 
  src( <string> <url-modifier>* )

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.

Exemples

HTML

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

css

.main {
  width: 530px;
}

.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

Specification
CSS Shapes Module Level 1 # shape-outside-property