Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

CSS - Fonction circle()

Description de la fonction circle().

La fonction circle() définit un cercle, qui pourra être utilisé de plusieurs façons, suivant la propriété qui fait appel à cette fonction.

La fonction circle() peut être utilisée avec :

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

Syntaxe 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 dimensions en CSS). Les pourcentages sont calculés par rapport à la plus grande des dimensions de l'élément (largeur ou hauteur).

    r acepte é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.

    La valeur par défaut est closest-side.

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

    x et y sont introduit 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 dimensions en CSS).

    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.

Simulateur.

L'image ci-dessous mesure 400 pixels en largeur et 300 pixels en hauteur.

clip-path:
( r   at x y )
Logo css

Voir aussi...

Formes géométriques - Propriétés.

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

Formes géométriques - Fonctions.

  • drop-shadow() : Définit l'ombre d'un élément (dimensions, flou, couleur).
  • ellipse() : Définit une ellipse.
  • inset() : Définit un rectangle, utilisable pour découper une image.
  • polygon() : Définit une forme.