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 :

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)
Statut du document:: CR (document proposé pour la recommandation)

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 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(
Schéma syntaxique de la fonction polygon() de CSSSyntaxe de polygon() pour dessiner des formes géométriques complexes. nonzero nonzero evenodd evenodd , , x y x y , ,
)
  • 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 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.

    Paramètre 'mode' de la fonction polygon()

    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.

clip-path :
Exemple pour la fonction polygon()

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

Colonne 1
Gestion des formes géométriques de base (cercles, polygones, chemins, etc).
Colonne 2
Prise en charge de la fonction CSS polygon() par les navigateurs.
1
Basic shapes
2
polygon()
Estimation de la prise en charge en pourcentage du parc actuel.
97%
96%

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.

Propriétés.

Définit le seuil de transparence en vu de l'habillage d'une image.
Définit la marge pour l'habillage d'un élément flottant.
Définit le contournement du texte pour un élément flottant.

Fonctions.

Définit un cercle.
Définit une ellipse.
Définit un rectangle, utilisable pour découper un élément.
Définit un contour d'après la syntaxe SVG d'un chemin.