LafonctionCSScircle() définit un cercle grâce à son rayon et à la position du centre.Elle fait partie dutype de donnée<basic-shape>.

Exemple interactif

clip-path: circle(50px);

clip-path: circle(6rem at right center);

clip-path: circle(10% at 2rem 90%);

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

clip-path: circle(farthest-side);

<section>  <div></div></section>

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

Syntaxe

shape-outside: circle(50%);clip-path: circle(6rem at 12rem 8rem);

Valeurs

<shape-radius>

Il peut s'agir d'une longueur<length>, d'un pourcentage<percentage> ou des valeursclosest-side etfarthest-side.

closest-side

Utilise la distance du centre de la forme jusqu'au côté le plus proche de la boîte de référence. Pour un cercle, il s'agit du côté le plus proche dans n'importe quelle dimension.

farthest-side

Utilise la distance du centre de la forme jusqu'au côté le plus éloigné de la boîte de référence. Pour un cercle, il s'agit du côté le plus éloigné dans n'importe quelle dimension.

<position>

Déplace le centre du cercle. Il peut s'agir d'une longueur<length>, d'un pourcentage<percentage> ou de mots‑clés commeleft. Si<position> est omis, la valeur par défaut estcenter (center).

Syntaxe formelle

<circle()> =
circle(<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

Cercle simple

Dans l'exemple ci‑dessous, la propriétéshape-outside a pour valeurcircle(50%), ce qui définit un cercle sur un élément flottant autour duquel le texte s'écoule.

<div>  <img    alt="A hot air balloon"    src="https://mdn.github.io/shared-assets/images/examples/round-balloon.png" />  <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;}img {  float: left;  shape-outside: circle(50%);}

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