Circle() - Fonction CSS

circle()

Résumé des caractéristiques de la fonction circle()

Description rapide
Définit un cercle qui pourra étre utilisé pour découper un élément ou définir une marge de contournement.
Statut
Standard
Pourcentages
Calculés par rapport aux dimensions de l'élément parent.
Module W3C
Module CSS - Formes de base
Références (W3C)
Statut du document: CR (document candidat à la recommandation)

Schéma syntaxique de circle().

Schéma syntaxique de la fonction CSS circle()Syntaxe de circle() en CSS, tracé de formes géométriques. length-r length-r closest-side closest-side farthest-side farthest-side at at length-x length-x left left center center right right length-y length-y top top center center bottom bottomcircle()circle()
Schéma syntaxique de la fonction circle().
Cliquez sur les termes du diagram pour plus de précision.

Sur le diagram, les termes en gras sont les termes prédéfinis de CSS, les autres sont décrits ci-dessous :

  • length-r est une valeur numérique positive ou null, suivie d'une des unités de dimension.
  • length-x et length-y sont des valeurs numériques, suivies d'une unité de dimension.

Description de la fonction circle().

La fonction circle() définit un cercle, en indiquant son rayon, et éventuellement, son centre par rapport à l'élément. Ce cercle pourra être utilisé de plusieurs façons, suivant la propriété qui fait appel à cette circle() :

  • Utilisé avec clip-path ce cercle pourra être utilisé pour découper un élément (pour faire des images rondes par exemple).
  • Avec shape-outside, il pourra servir à définit une forme d'habillage.

La fonction circle()
utilisée avec la propriété clip-path
découpe l'élément suivant
un cercle.
 

La fonction circle()
utilisée avec la propriété clip-path
découpe l'élément suivant un cercle.
Des parties de l'élément sont masquées.
L'élément vert est flottant.
La fonction circle()
utilisée avec la propriété shape-outside
forme l'habillage suivant un cercle.

L'élément vert est flottant.
La fonction circle()
utilisée avec la propriété shape-outside
forme l'habillage suivant un cercle.

La valeur circle() peut être utilisée avec les propriétés suivantes :

  • clip-path : Définit la partie visible de l'élément, délimitée par une forme géométrique (rectangle, polygone...).
  • offset-path : Définit le chemin sur lequel pourra se posiitionner un élément (Motion path).
  • shape-outside : Définit la forme du contournement du texte pour un élément flottant.

Syntaxes de la fonction circle().

  • clip-path: circle(50px); r

    r est le rayon du cercle. C'est une valeur numérique suivie d'une unité de dimension relative ou absolue (voir les unités de dimension). Les pourcentages sont calculés par rapport à la plus grande des dimensions de l'élément (largeur ou hauteur).

    r accepte également les valeurs prédéfinies suivantes :

    1. farthest-side : le rayon est égal à la distance depuis le centre du cercle jusqu'au bord le plus éloigné,
    2. closest-side : le rayon est égal à la distance depuis le centre du cercle jusqu'au bord le plus proche.
    Effet de closest-side
    Effet de la valeur closest-side
    Effet de farthest-side
    Effet de la valeur farthest-side

    Si aucune valeur n'est précisée, la fonction circle() prend pour valeur par défaut closest-side.

  • clip-path: circle(50px at 20% 30%); r x y

    x et y sont introduits pas le mot at. Ils indiquent les coordonnées du centre du cercle, mesurées par rapport au bord gauche et au bord supérieur de l'élément.

    x et y sont des valeurs numériques suivies d'une unité de dimension relative ou absolue (voir les unités de dimension). S'il s'agit de pourcentages, ces derniers sont calculés par rapport à la largeur de l'élément pour x et par rapport à la hauteur de l'élément pour y.

    Les valeurs négatives sont autorisées et positionnent le centre du cercle en dehors de l'élément.

    x et y acceptent aussi les valeurs prédéfinies suivantes :
    left, center ou right pour x
    et top, center ou bottom pour y.

    Pour ces deux paramètres, la valeur par défaut est center.

Animation avec la fonction circle().

Voici un petit amusement qui imite le déplacement d'un spot de lumière dévoilant partiellement le logo CSS3. Il y a en fait deux images superposées ; celle de dessous est fortement assombrie, tandis que celle de dessus est découpée avec la propriété clip-path et la fonction circle() dont les paramètres sont animés.

Logo css
Logo css

Simulateur avec la fonction circle().

L'image ci-dessous mesure 280 pixels en largeur et 210 pixels en hauteur. Jouez avec les paramètres de la fonction circle() pour bien en comprendre le fonctionnement. En particulier, testez les paramètre closest-side et farthest-side.

clip-path :
Logo css

Support de la fonction circle().

Aucun problème de compatibilité n'est à signaler avec les navigateurs récents ou couramment utilisés.

Colonne 1
Support des formes géométriques utilisables avec clip-path, shape-outside, etc.
Colonne 2
Traitement de la fonction circle() pour tracer un cercle.
1
Formes
géométriques
2
Fonction
circle()
Estimation de la prise en charge globale.
97%
95%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

UC Browser pour Androïd

Opéra Mobile

QQ Browser

Baidu Browser

Opéra

Samsung Internet

Chrome

Safari

Firefox

Safari sur IOS

Edge

Androïd Brower

Firefox pour Androïd

Chrome pour Androïd

KaiOS Browser

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.
Caniuse
Caniuse

Historique de la fonction circle().

Voir aussi, dans le même module de standardisation que circle().

Les spécifications CSS éditées par le W3C sont organisées en modules. circle() fait partie du "module CSS - Formes de base" (CSS Shapes Module). Les définitions suivantes sont également décrites dans ce même module.

Propriétés :

shape-image-threshold
Définit le seuil de transparence en vu de l'habillage d'une image.
shape-margin
Définit la marge pour l'habillage d'un élément flottant.
shape-outside
Définit la forme du contournement du texte pour un élément flottant.

Fonctions :

ellipse()
Définit une ellipse à partir des rayons et des coordonnées du centre.
inset()
Définit un rectangle, utilisable pour découper un élément.
path()
Définit un contour d'après la syntaxe SVG d'un chemin.
polygon()
Définit une forme à partir d'une série de points exprimés par leurs coordonnées X et Y.
shape()
Définit une forme quelconque, composée de segments de droite ou de courbes, qui pourra être utilisée par exemple avec la propriété clip-path.
xywh()
Définit un rectangle, éventuellement avec des coins arrondis, à partir des dimensions d'un élément.