Ellipse() - Fonction CSS

ellipse()

Résumé des caractéristiques de la fonction `ellipse()`

Description rapide

Définit une ellipse.

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)

CSS Shapes Module Level 1

Statut du document: CR (document candidat à la recommandation)

Schéma syntaxique de `ellipse()`.

Schéma syntaxique de la fonction ellipse()
Les liens du schéma donnent accès à plus de détails
Télécharger le schéma en SVG

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

length-rx et length-ry sont les rayons horizontal et vertical de l'ellipse. Deux valeurs numériques suivies d'une des unités de dimension.
length-x et length-y sont les coordonnées du centre de l'ellipse. Deux valeurs numériques suivies d'une unité de dimension.

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 ou shape-outside.

La valeur `ellipse()` 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...).
shape-outside : Définit la forme du contournement du texte pour un élément flottant.

Syntaxes 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 dimension.
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.
clip-path: ellipse(closest-side 60px at 75px 50px); clip-path: ellipse(farthest-side 60px at 75px 50px);

Les valeurs closest-side et farthest-side définissent un rayon de l'ellipse tel que cette dernière vienne tangenter avec le côté le plus proche (closest-side) ou le côté le plus éloigné (farthest-side) de l'élément.

Ces deux valeurs peuvent être utilisées pour définir le rayon horizontal ou le rayon vertical de l'ellipse.

clip-path:ellipse(closest-side 20px)

clip-path:ellipse(farthest-side 20px)

Dans le cas d'une ellipse centrée, closest-side et farthest-side donnent un résultat identique.

clip-path:ellipse(closest-side 20px at 30px 30px)
Ellipse décentrée, rayon horizontal défini par rapport au côté le plus proche.

clip-path:ellipse(farthest-side 20px at 30px 30px)
Ellipse décentrée, rayon horizontal défini par rapport au côté le plus éloigné.

Simulateur avec la fonction `ellipse()`

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 :

none

ellipse( 120px 150px )

ellipse( 150px 100px at left center )

ellipse( closest-side closest-side at 100px 50px )

ellipse( farthest-side farthest-side at 100px 50px )

Support de la fonction `ellipse()`.

Colonne 1

Support des formes géométriques utilisables avec clip-path, shape-outside, etc.

Colonne 2

Support de la forme géométrique ellipse(), utilisable avec les propriétés clip-path et shape-outside.

Formes
géométriques

Fonction
ellipse()

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

Historique de la fonction `ellipse()`.

Module CSS - Formes de base - Niveau 1

Définition de la fonction ellipse().

20 Juin 2013
Document de travail.
20 Mars 2014
Candidat à la recommandation.

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

Les spécifications CSS éditées par le W3C sont organisées en modules. La fonction ellipse() fait partie du "module CSS - Formes de base". Les définitions suivantes sont également décrites dans ce même module. Voir CSS Shapes 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 :

circle()

Définit un cercle qui pourra étre utilisé pour découper un élément ou définir une marge de contournement.

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.