Fonction CSS polygon()

Exemple interactif

clip-path: polygon(
  0% 20%,
  60% 20%,
  60% 0%,
  100% 50%,
  60% 100%,
  60% 80%,
  0% 80%
);

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

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element"></div>
</section>

#default-example {
  background: #ffee99;
}

#example-element {
  background: linear-gradient(to bottom right, #ff5522, #0055ff);
  width: 100%;
  height: 100%;
}

Syntaxe

/* Liste de coordonnées */
polygon(50% 2.4%, 34.5% 33.8%, 0% 38.8%, 25% 63.1%, 19.1% 97.6%)
polygon(0px 0px, 200px 100px, 0px 200px)
polygon(0% 0px, 100% 100px, 0% 100%)
polygon(0 0, 50% 1rem, 100% 2vw, calc(100% - 20px) 100%, 0 100%)

/* Liste de coordonnées avec règle de remplissage et/ou arrondi des valeurs */
polygon(nonzero, 0% 0%, 50% 50%, 0% 100%)
polygon(round 20px, 0% 0%, 50% 50%, 0% 100%)
polygon(evenodd round 2em, 0% 0%, 50% 50%, 0% 100%)

Paramètres

La fonction polygon() accepte un premier paramètre facultatif contenant des valeurs qui modifient l'apparence du polygone — un mot-clé fill-rule, le mot-clé round suivi d'une valeur <length>, ou les deux. Les composants du premier paramètre sont séparés par des espaces. Les autres paramètres sont des paires de coordonnées x/y de valeurs <length-percentage> séparées par des espaces.

<fill-rule> Facultatif

Un mot-clé égal à nonzero (la valeur par défaut) ou evenodd, qui définit l'algorithme utilisé pour remplir la forme du polygone.

round <length> Facultatif

Le mot-clé round définit que le polygone possède des coins arrondis, et la valeur <length> associée définit le rayon de ces coins.

<length-percentage>

Chaque sommet, ou point, du polygone est représenté par une paire de valeurs <length-percentage> séparées par une espace et définissant les coordonnées x/y du sommet par rapport à la boîte de référence de la forme.

Valeur de retour

Une valeur <basic-shape>.

Description

Vous pouvez créer presque n'importe quelle forme avec la fonction polygon() en définissant les coordonnées x/y de ses sommets, ou points, sous forme de paires de valeurs <length-percentage> séparées par des virgules :

polygon(x1 y1, x2 y2, x3 y3, x4 y4, xn yn)

Bien qu'un seul point suffise pour créer une valeur valide de la fonction polygon(), au moins 3 points sont nécessaires pour créer une forme (un triangle). Le nombre de points définissables n'a pas de limite supérieure. La forme est dessinée en reliant les points définis dans l'ordre où ils apparaissent dans la fonction, une dernière ligne étant automatiquement dessinée entre le dernier et le premier point pour fermer la forme.

Vous pouvez définir les coordonnées d'une forme triangulaire comme ceci :

Vous pouvez appliquer ces coordonnées à la propriété CSS clip-path dans une fonction polygon() comme suit :

clip-path: polygon(0% 0%, 100% 0%, 100% 100%);

Cela crée une forme triangulaire qui couvre la moitié de la surface de son conteneur parent en définissant les coordonnées de trois de ses quatre coins : en haut à gauche (0% 0%), en haut à droite (100% 0%) et en bas à droite (100% 100%). Si vous supposez un conteneur de 200x200px avec un arrière-plan vert :

<div class="boite"></div>

.boite {
  width: 200px;
  height: 200px;
  background-color: green;
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%);
}

L'effet de l'ordre des points

L'ordre dans lequel vous définissez les points peut produire des formes différentes. Par exemple, les deux déclarations clip-path suivantes utilisent une fonction polygon() avec des paires de coordonnées X/Y pour les quatre coins du conteneur, mais dans un ordre différent.

clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
clip-path: polygon(0% 0%, 100% 0%, 0% 100%, 100% 100%);

<div class="boite"></div>
<div class="boite boite2"></div>

body {
  display: flex;
  gap: 20px;
}

.boite {
  width: 200px;
  height: 200px;
  background-color: purple;
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}

.boite2 {
  clip-path: polygon(0% 0%, 100% 0%, 0% 100%, 100% 100%);
}

La première fonction dessine un carré, tandis que la seconde dessine une forme de sablier.

Définir les modificateurs d'un polygone

La fonction polygon() accepte un premier paramètre facultatif qui modifie le rendu de la forme obtenue. La valeur du paramètre peut inclure l'un ou l'autre des éléments suivants, ou les deux, séparés par des espaces :

• Un mot-clé <fill-rule> égal à nonzero (la valeur par défaut) ou evenodd, qui définit l'algorithme utilisé pour remplir la forme du polygone. Cela n'a un effet que lorsque les lignes tracées entre les valeurs de coordonnées se chevauchent.
• Le mot-clé round suivi d'une valeur <length>. Cela définit que le polygone possède des coins arrondis, la valeur <length> définissant le rayon de ces coins.

Par exemple, vous pouvez compléter l'exemple précédent du triangle et ajouter des coins arrondis :

clip-path: polygon(round 20px, 0% 0%, 100% 0%, 100% 100%);

<div class="boite"></div>

.boite {
  width: 200px;
  height: 200px;
  background-color: green;
  clip-path: polygon(round 20px, 0% 0%, 100% 0%, 100% 100%);
}

Le résultat est la même forme triangulaire, mais avec des coins arrondis d'un rayon de 20px :

Syntaxe formelle

<polygon()> = 
  polygon( <'fill-rule'>? [ round <length> ]? , [ <length-percentage> <length-percentage> ]# )  

<fill-rule> = 
  nonzero  |
  evenodd  

<length-percentage> = 
  <length>      |
  <percentage>  

Exemples

Créer un triangle

Dans cet exemple, un triangle est formé en définissant les coordonnées de ses trois points.

HTML

<div class="triangle"></div>

CSS

.triangle {
  width: 400px;
  height: 400px;
  background-color: magenta;
  clip-path: polygon(100% 0%, 50% 50%, 100% 100%);
}

Résultat

Les coordonnées du triangle sont le coin en haut à droite (100% 0%), le point central (50% 50%) et le coin en bas à droite (100% 100%) du conteneur.

Créer une étoile arrondie

Dans cet exemple, nous créons une forme d'étoile et utilisons le mot-clé round pour arrondir ses coins.

HTML

<div class="etoile"></div>

CSS

.etoile {
  width: 400px;
  height: 400px;
  background-color: hotpink;
  clip-path: polygon(
    round 20px,
    50% 5%,
    60.85% 27.48%,
    85.22% 21.99%,
    74.38% 44.44%,
    93.88% 60.01%,
    69.57% 65.56%,
    69.53% 90.55%,
    50% 75%,
    30.47% 90.55%,
    30.43% 65.56%,
    6.12% 60.01%,
    25.62% 44.44%,
    14.78% 21.99%,
    39.15% 27.48%
  );
}

@supports not (clip-path: polygon(round 20px, 0% 0%, 100% 0%, 100% 100%)) {
  body::before {
    font-family: sans-serif;
    content: "Votre navigateur ne prend pas en charge le mot-clé round de la fonction polygon().";
    background-color: wheat;
    padding: 1rem 0;
    text-align: center;

    z-index: 1;
    position: fixed;
    inset: 40% 0 auto;
  }
}

Résultat

Définir un polygone pour shape-outside

Dans cet exemple, une forme est créée pour que le texte la suive grâce à la propriété shape-outside.

<div class="boite">
  <div class="forme"></div>
  <p>
    Une nuit de novembre en 1782, paraît‑il, deux frères étaient assis près de
    leur feu d'hiver dans la petite ville française d'Annonay, observant les
    volutes de fumée grises s'élever de la large cheminée. Ils s'appelaient
    Stephen et Joseph Montgolfier, ils exerçaient le métier de papetier, et
    étaient connus pour leur esprit réfléchi et leur vif intérêt pour toute
    connaissance scientifique et toute nouvelle découverte. Avant cette nuit—une
    nuit mémorable, comme elle devait le devenir—des centaines de millions de
    personnes avaient vu s'élever la fumée de leurs feux sans en tirer une
    inspiration particulière.
  </p>
</div>

.boite {
  width: 250px;
}

.forme {
  float: left;
  shape-outside: polygon(
    0 5%,
    15% 12%,
    30% 15%,
    40% 26%,
    45% 35%,
    45% 45%,
    40% 55%,
    10% 90%,
    10% 98%,
    8% 100%,
    0 100%
  );
  width: 300px;
  height: 320px;
}

p {
  font-size: 0.9rem;
}

Spécifications

Compatibilité des navigateurs

Voir aussi

• Propriétés utilisant ce type de données : border-shape, clip-path, shape-outside
• Guide des formes de base