CSS polygon() funktion

Definition och användning

CSS polygon() Funktioner används för att definiera en polygon.

polygon() Funktioner med clip-path Egenskaperna och shape-outside Använd egenskaperna tillsammans.

Exempel

Exempel 1

Beskär bilden till en polygon:

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

Prova själv

Exempel 2

Beskär bilden till en polygon:

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

Prova själv

Exempel 3

använd polygon()、clip-path och 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%);
}

Prova själv

CSS syntax

polygon(fill-rule, length-percentage)
Värde Beskrivning
fill-rule

Valfritt. Ange fyllningsregeln. Detta kan vara nonzero eller evenodd.

Standardvärdet är nonzero.
length-percentage

Obligatorisk. Ange punkterna som definierar polygonen. Detta kan vara längd eller procentvärde.

Varje punkt är ett par x och y-koordinater. 0 0 definierar vänstra övre hörnet, 100% 100% definierar högra nedre hörnet.

Tekniska detaljer

Version: CSS Shape Module Level 1

Webbläsarstöd

Talen i tabellen representerar den första webbläsarversion som helt stöder denna funktion.

Chrome Edge Firefox Safari Opera
37 79 54 10.1 24

relaterade sidor

Referens:clip-path egenskap

Referens:shape-outside egenskap

Referens:circle() funktion

Referens:ellipse() funktion

Referens:inset() funktion