CSS polygon() funktion

definition og brug

CSS polygon() funktioner bruges til at definere en polygon.

polygon() funktioner med clip-path egenskaber og shape-outside brug egenskaber sammen.

eksempel

eksempel 1

Klip billedet til polygon:

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

Prøv det selv

eksempel 2

Klip billedet til polygon:

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

Prøv det selv

eksempel 3

brug polygon()、clip-path og 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%);
}

Prøv det selv

CSS syntaks

polygon(fill-rule, length-percentage)
Værdi Beskrivelse
fill-rule

Valgfri. Angiv fyldningsreglen. Dette kan være nonzero eller evenodd.

Standardværdien er nonzero.
length-percentage

Obligatorisk. Angiv punkterne, der definerer polygonen. Dette kan være længde eller procentværdi.

Hver punkt er et par x og y koordinater. 0 0 definerer øverste venstre hjørne, 100% 100% definerer nederste højre hjørne.

Tekniske detaljer

Version: CSS Shape Module Level 1

Browserunderstøttelse

Tallene i tabellen viser den første browserversion, der fuldt ud understøtter denne funktion.

Chrome Edge Firefox Safari Opera
37 79 54 10.1 24

relaterede sider

Referencer:clip-path egenskab

Referencer:shape-outside egenskab

Referencer:circle() funktion

Referencer:ellipse() funktion

Referencer:inset() funktion