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 :

CSS - Fonction polygon()

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

  • 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 dimensions en CSS).
    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 :

    1. nonzero : c'est la valeur par défaut. Les zones internes sont conservées.
    2. evenodd : les zones internes ne sont pas conservées.
    nonzero
    evenodd

Simulateur.

Le simulateur vous permet de faire des essais avec un polygone à 4 sommets mais il pourrait en compter plus.

clip-path:
( x1 y1 x2 y2 x3 y3 x4 y4 )
Exemple pour la fonction polygon()

Compatibilité et prise en charge par les navigateurs.

La plupart des navigateurs traitent correctement les formes géométriques, à part IE et Edge qui sont un peu à la traine.

Afficher les versions antérieures   Afficher la version à venir  

Voir aussi...

Formes géométriques - Propriétés.

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

Formes géométriques - Fonctions.

  • circle() : Définit un cercle.
  • drop-shadow() : Définit l'ombre d'un élément (dimensions, flou, couleur).
  • ellipse() : Définit une ellipse.
  • inset() : Définit un rectangle, utilisable pour découper une image.