ellipse()

Exemple interactif

clip-path: ellipse(20px 50px);

clip-path: ellipse(4rem 50% at right center);

clip-path: ellipse(closest-side closest-side at 5rem 6rem);

clip-path: ellipse(closest-side farthest-side);

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element"></div>
</section>

#default-example {
  background: #ffee99;
}

#example-element {
  background: linear-gradient(to bottom right, #ff5522, #0055ff);
  width: 100%;
  height: 100%;
}

Syntaxe

shape-outside: ellipse(40% 50% at left);
shape-outside: ellipse(closest-side farthest-side at 30%);

Une ellipse est essentiellement un cercle aplati ; la fonction ellipse() agit de manière très similaire à circle(), sauf qu'il faut préciser deux rayons : x puis y.

Valeurs

<shape-radius>

Deux rayons, x puis y, dans cet ordre. Ils peuvent être une longueur <length>, un pourcentage <percentage> ou les mots‑clés closest-side et farthest-side.

closest-side

Utilise la distance entre le centre de la forme et le côté le plus proche de la boîte de référence. Pour les ellipses, il s'agit du côté le plus proche selon la dimension du rayon.

farthest-side

Utilise la distance entre le centre de la forme et le côté le plus éloigné de la boîte de référence. Pour les ellipses, il s'agit du côté le plus éloigné selon la dimension du rayon.

<position>

Déplace le centre de l'ellipse. Il peut s'agir d'une longueur <length>, d'un pourcentage <percentage> ou de valeurs comme left. La valeur par défaut de <position> est center si elle est omise.

Syntaxe formelle

<ellipse()> = 
  ellipse( <radial-size>? [ at <position> ]? )  

<radial-size> = 
  <radial-extent>               |
  <length [0,∞]>                |
  <length-percentage [0,∞]>{2}  

<position> = 
  <position-one>   |
  <position-two>   |
  <position-four>  

<radial-extent> = 
  closest-corner   |
  closest-side     |
  farthest-corner  |
  farthest-side    

<length-percentage> = 
  <length>      |
  <percentage>  

<position-one> = 
  left                 |
  center               |
  right                |
  top                  |
  bottom               |
  x-start              |
  x-end                |
  y-start              |
  y-end                |
  block-start          |
  block-end            |
  inline-start         |
  inline-end           |
  <length-percentage>  

<position-two> = 
  [ left | center | right | x-start | x-end ] && [ top | center | bottom | y-start | y-end ]  |
  [ left | center | right | x-start | x-end | <length-percentage> ] [ top | center | bottom | y-start | y-end | <length-percentage> ]  |
  [ block-start | center | block-end ] && [ inline-start | center | inline-end ]  |
  [ start | center | end ]{2}                         

<position-four> = 
  [ [ left | right | x-start | x-end ] <length-percentage> ] && [ [ top | bottom | y-start | y-end ] <length-percentage> ]  |
  [ [ block-start | block-end ] <length-percentage> ] && [ [ inline-start | inline-end ] <length-percentage> ]  |
  [ [ start | end ] <length-percentage> ]{2}          

Exemples

Exemple simple d'ellipse()

Cet exemple montre une ellipse positionnée à gauche, avec un rayon horizontal de 40 % et un rayon vertical de 50 %. Cliquez sur « Exécuter » dans les blocs de code pour modifier les valeurs et observer le rendu :

<div class="box">
  <div class="shape"></div>
  <p>
    Une nuit de novembre en 1782, paraît‑il, deux frères étaient assis près de
    leur feu d'hiver dans la petite ville française d'Annonay, observant les
    volutes de fumée grises s'élever de la large cheminée. Ils s'appelaient
    Stephen et Joseph Montgolfier, ils exerçaient le métier de papetier, et
    étaient connus pour leur esprit réfléchi et leur vif intérêt pour toute
    connaissance scientifique et toute nouvelle découverte. Avant cette nuit—une
    nuit mémorable, comme elle devait le devenir—des centaines de millions de
    personnes avaient vu s'élever la fumée de leurs feux sans en tirer une
    inspiration particulière.
  </p>
</div>

body {
  font: 1.2em / 1.5 sans-serif;
}
.shape {
  float: left;
  shape-outside: ellipse(40% 50% at left);
  margin: 20px;
  width: 100px;
  height: 200px;
}

Utilisation de closest-side / farthest-side

Les mots‑clés closest-side et farthest-side sont utiles pour créer rapidement une ellipse basée sur la taille de la boîte de référence de l'élément flottant.

<div class="box">
  <div class="shape"></div>
  <p>
    Une nuit de novembre en 1782, paraît‑il, deux frères étaient assis près de
    leur feu d'hiver dans la petite ville française d'Annonay, observant les
    volutes de fumée grises s'élever de la large cheminée. Ils s'appelaient
    Stephen et Joseph Montgolfier, ils exerçaient le métier de papetier, et
    étaient connus pour leur esprit réfléchi et leur vif intérêt pour toute
    connaissance scientifique et toute nouvelle découverte. Avant cette nuit—une
    nuit mémorable, comme elle devait le devenir—des centaines de millions de
    personnes avaient vu s'élever la fumée de leurs feux sans en tirer une
    inspiration particulière.
  </p>
</div>

body {
  font: 1.2em / 1.5 sans-serif;
}
.shape {
  float: left;
  shape-outside: ellipse(closest-side farthest-side at 30%);
  margin: 20px;
  width: 100px;
  height: 140px;
}

Spécifications

Compatibilité des navigateurs

Voir aussi

• Propriétés qui utilisent ce type de données : clip-path, shape-outside
• Guide des formes de base