ellipse() - Fonction CSS
Résumé des caractéristiques de la 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()
.
rx
et ry
sont les rayons horizontal et vertical de l'ellipse.
x
et y
sont les coordonnées du centre de l'ellipse.
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
etry
: deux valeurs positives ou nulles, suivies d'une unité de dimension. Voir les unités CSS 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 :
farthest-side
: moitié de la distance depuis le centre de l'ellipse jusqu'au bord le plus éloigné.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
etry
estclosest-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 motat
.
x
ety
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
etclosest-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()
.
Prise en charge par les navigateurs (compatibilité).
ellipse()
.
ellipse()
Navigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Baidu Browser
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
KaiOS Browser
Opéra
Opéra Mobile
QQ Browser
Safari
Safari sur IOS
Samsung Internet
Oméra mini
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. ellipse()
fait partie du Module CSS - Formes de base (CSS Shapes Module). Les définitions suivantes sont également décrites dans ce même module.