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

/* Spécifié comme liste de coordonnées */
/* polygon(<length-percentage> <length-percentage>, ... )*/
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%)

/* Spécifié comme liste de coordonnées et règle de remplissage */
/* polygon(<fill-rule> <length-percentage> <length-percentage>, ... )*/
polygon(nonzero, 0% 0%, 50% 50%, 0% 100%)
polygon(evenodd, 0% 0%, 50% 50%, 0% 100%)

Les paramètres de polygon() sont séparés par une virgule et des espaces optionnels. Le premier paramètre est une valeur optionnelle <fill-rule>. Les paramètres suivants sont des points qui définissent le polygone. Chaque point est une paire de coordonnées x/y <length-percentage> séparées par un espace, par exemple « 0 0 » et « 100% 100% » pour les coins en haut à gauche et en bas à droite.

Remarque : l'élément SVG <polygon> possède des attributs séparés pour fill-rule et points, et points accepte indifféremment les espaces ou les virgules comme séparateurs. En CSS, les règles de séparation de polygon() sont strictes.

Paramètres

<fill-rule> Facultatif

Valeur optionnelle nonzero (par défaut si omise) ou evenodd, qui définit la règle de remplissage.

<length-percentage>

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

Valeur de retour

Retourne une valeur <basic-shape>.

Description

Vous pouvez créer presque n'importe quelle forme avec la fonction polygon() en définissant les coordonnées de ses points. L'ordre dans lequel vous définissez les points a de l'importance et peut produire des formes différentes. La fonction polygon() exige au moins 3 points (ce qui crée un triangle), mais il n'y a pas de limite supérieure.

La fonction polygon() accepte des coordonnées ou points séparés par des virgules. Chaque point est représenté par une paire de valeurs x et y séparées par un espace, qui indiquent les coordonnées du point dans le polygone.

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

La correspondance des coordonnées du conteneur peut être visualisée ainsi :

En appliquant ces coordonnées à la propriété CSS clip-path avec la fonction polygon() :

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

Cela crée un rectangle de la taille de son parent en définissant les coordonnées de ses quatre coins : en haut à gauche (0% 0%), en haut à droite (100% 0%), en bas à droite (100% 100%) et en bas à gauche (0% 100%).

Syntaxe formelle

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

<fill-rule> = 
  nonzero  |
  evenodd  

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

Examples

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.

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="box">
  <div class="shape"></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>

.box {
  width: 250px;
}

.shape {
  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 : clip-path, shape-outside
• Guide des formes de base