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 ellipse()

Description de la fonction ellipse().

La fonction ellipse() définit une ellipse. Cette forme pourra être utilisée avec des propriétés CSS telles que clip-path.

La fonction ellipse() 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 ellipse().

  • clip-path: ellipse(80px 60px); rx ry

    Cette première syntaxe définit une ellipse centrée sur l'élément. Elle comporte seulement deux paramètres séparés par un espace.

    rx et ry : deux valeurs positives ou nulles, suivies d'une unité de dimension. Voir les unités de dimensions en CSS.
    Ces deux valeurs définissent respectivement le rayon horizontal et vertical de l'ellipse.

    Si les valeurs sont exprimées en pourcentages, ces derniers seront calculés par rapport à la largeur et la hauteur de l'ellipse. Il faut garder à l'esprit qu'il s'agit de rayons, donc 50% correspond à une ellipse qui est déjà de mêmes dimensions que l'élément.

    Deux valeurs prédéfinies sont également acceptées à la place des valeurs numériques :

    1. farthest-side : moitié de la distance depuis le centre de l'ellipse jusqu'au bord le plus éloigné.
    2. closest-side : moitié de la distance depuis le centre de l'ellipse jusqu'au bord le plus proche.

    La valeur par défaut pour rx et ry est closest-side.

  • clip-path: ellipse(80px 60px at 75px 50px); rx ry x y

    La syntaxe complète de la fonction ellipse() comporte deux paramètres supplémentaires, introduits par le mot at.
    x et y sont deux valeurs numériques, positives ou négatives avec une unité de dimension. Les pourcentages sont calculés par rapport à la largeur et à la hauteur de l'élément.

    Ces deux valeurs optionnelles sont les coordonnées du centre de l'ellipse. Leur valeur par défaut est 50%, ce qui correspond à une ellipse centrée sur l'élément.

    Remarque : le déplacement du centre de l'ellipse modifie également les valeurs farthest-side et closest-side puisque celles-ci sont déterminées par rapport au centre de l'ellipse.

Simulateur.

L'image ci-dessous mesure 400 pixels en largeur et 300 pixels en hauteur. Elle est "découpée" en forme d'ellipse par la propriété clip-path et la fonction ellipse().

clip-path:
( rx ry  at x y )
Démo pour la fonction ellipse()

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.

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