polygon() - Fonction CSS
Résumé des caractéristiques de la fonction polygon()
evenodd
| nonzero
Description de la fonction polygon()
.
La fonction polygon()
définit une forme composée d'un nombre quelconque de points,
chacun de ceux-ci étant positionné par ses coordonnées X et Y.
Il est nécessaire de définir au minimum 3 points.
Ce polygone peut ensuite être utilisé pour découper un élément avec la propriété clip-path
,
ou pour définir un habillage irrégulier, avec la propriété shape-outside
.
La fonction polygon() 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 polygon()
.
x
et x
sont des coordonnées. Ces groupes de deux valeurs peuvent être répétés autant que nécessaire en les séparant par des virgules.
La syntaxe accepte deux ou une seule paire de valeurs, mais pour définir un polygone il faut au moins trois paires de valeurs.
polygon(
)
- clip-path: polygon(0px 0px, 10px 20px, 30px 25px,...); x1 y1 x2 y2 x3 y3
De
x1 y1
àxn yn
: une série de au moins trois paires de valeurs, séparées par une virgule. Chacune des valeurs est un nombre positif, négatif ou nul, suivi d'une unité de dimension absolue ou relative (voir les unités CSS de dimension).
Les pourcentages sont calculées, pour les valeursx
par rapport à la largeur de l'élément, et, pour les valeursy
par rapport à la hauteur de l'élément. - clip-path: polygon(nonzero, 0px 0px, 10px 20px, 30px 25px,...); m x1 y1 x2 y2 x3 y3
Dans cette deuxième syntaxe, le paramètre
m
définit si les zones internes doivent être conservées dans le polygone ou, au contraire, être éliminées. Cette nuance n'est importante que si les points du polygone, donc son tracé, fait apparaître des zones internes.m
peut prendre les valeurs suivantes :nonzero
: c'est la valeur par défaut. Les zones internes sont conservées.
evenodd
: les zones internes ne sont pas conservées.
nonzero
evenodd
Simulateur.
Compatibilité et prise en charge par les navigateurs.
La plupart des navigateurs traitent correctement les formes géométriques, dont la fonction polygon()
(à part IE mais ce navigateur
a maintenant pratiquement disparu).
polygon()
par les navigateurs.
polygon()
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 polygon()
.
Les spécifications CSS éditées par le W3C sont organisées en modules. polygon()
fait partie du Module CSS - Formes de base (CSS Shapes Module). Les définitions suivantes sont également décrites dans ce même module.