Polygon() - Fonction CSS

polygon()

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

Description rapide

Définit une forme.

Statut

Standard

Valeurs prédéfinies

evenodd | nonzero

Pourcentages

Calculés par rapport à la largeur ou la hauteur de l'élément.

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 `polygon()`.

Schéma syntaxique de la fonction polygon().
Cliquez sur les termes du diagram pour plus de précision.

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

length-x et length-y sont des valeurs numériques suivies d'une des unités de dimension.
La syntaxe accepte deux ou même une seule paire de valeurs, mais pour définir un polygone il faut au moins trois paires de valeurs.
%-x et %-y sont des pourcentages évalués par rapport à la largeur et la hauteur de l'élément.

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

La valeur `polygon()` 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 `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 de dimension).
Les pourcentages sont calculées, pour les valeurs x par rapport à la largeur de l'élément, et, pour les valeurs y 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 avec la fonction `polygon()`

clip-path :

none

polygon( 10% 10%,90% 10%,90% 90%,10% 90%,10% 10% )

polygon( 0% 0%,100% 0%,50% 100%,0% 0% )

polygon( evenodd,0% 0%,100% 0%,50% 100%,0% 0%,15% 10%,85% 10%,50% 80%,15% 10% )

Support de la fonction `polygon()`.

La plupart des navigateurs traitent correctement les formes géométriques, dont la fonction polygon() (à part IE mais ce navigateur a maintenant pratiquement disparu).

Colonne 1

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

Colonne 2

Support de la fonction polygon() qui définit une série de points pour créer un polygone. Ce polygone sera utilisable avec des propriétés comme clip-path, shape-outside, etc.

Formes
géométriques

Fonction
polygon()

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 `polygon()`.

Module CSS - Formes de base - Niveau 1

Définition de la fonction polygon().

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

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. La fonction polygon() fait partie du "module CSS - Formes de base". Les définitions suivantes sont également décrites dans ce même module. Si nécessaire, reportez-vous à 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.

ellipse()

Définit une ellipse.

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.