Fonction CSS polygon()

Définition et utilisation

CSS polygon() La fonction est utilisée pour définir un polygone.

polygon() Fonction avec clip-path Attribut et shape-outside Utilisez ensemble les attributs.

Exemple

Exemple 1

Coupez l'image en polygone :

img {
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

Essayez-le vous-même

Exemple 2

Coupez l'image en polygone :

img {
  clip-path: polygon(100% 0%, 50% 50%, 100% 100%);
}

Essayez-le vous-même

Exemple 3

Utilisez polygon()、clip-path et shape-outside:

img {
  float: left;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  shape-outside: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

Essayez-le vous-même

Syntaxe CSS

polygon(fill-rule, length-percentage)
Valeur Description
fill-rule

Optionnel. Spécifiez la règle de remplissage. Cela peut être nonzero ou evenodd.

La valeur par défaut est nonzero.
length-percentage

Obligatoire. Spécifiez les points définissant le polygone. Ce peut être une longueur ou une valeur en pourcentage.

Chaque point est une paire de coordonnées x et y. 0 0 définit le coin supérieur gauche, 100% 100% définit le coin inférieur droit.

Détails techniques

Version : Module CSS Shape Level 1

Prise en charge du navigateur

Les nombres dans le tableau représentent la version du navigateur qui prend en charge cette fonction pour la première fois.

Chrome Edge Firefox Safari Opera
37 79 54 10.1 24

pages associées

Référence :attribut clip-path

Référence :attribut shape-outside

Référence :Fonction circle()

Référence :Fonction ellipse()

Référence :Fonction inset()