CSS polygon() functie

definitie en gebruik

CSS polygon() functies worden gebruikt om een polygoon te definiëren.

polygon() functies met clip-path eigenschappen en shape-outside eigenschappen samen gebruiken.

voorbeeld

voorbeeld 1

beeld afknippen tot een polygoon:

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

probeer het zelf

voorbeeld 2

beeld afknippen tot een polygoon:

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

probeer het zelf

voorbeeld 3

gebruik polygon()enclip-path en 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%);
}

probeer het zelf

CSS syntaxis

polygon(fill-rule, length-percentage)
waarde beschrijving
fill-rule

optioneel. Specificeer de vulregels. Dit kan nonzero of evenodd zijn.

de standaardwaarde is nonzero.
length-percentage

verplicht. Specificeer de punten die de polygoon definiëren. Dit kan een lengte of een percentage zijn.

Elke punt is een paar x- en y-coördinaten. 0 0 definieert de linkerkantbovenhoek, 100% 100% definieert de rechterbenedenhoek.

technische details

versie: CSS Shape Module Level 1

browserondersteuning

De cijfers in de tabel geven de browserversie aan die de functie volledig ondersteunt.

Chrome Edge Firefox Safari Opera
37 79 54 10.1 24

gerelateerde pagina's

Referentie:clip-path eigenschap

Referentie:shape-outside eigenschap

Referentie:circle() functie

Referentie:ellipse() functie

Referentie:inset() functie