CSS polygon() funktio

Määrittely ja käyttö

CSS polygon() Funktiot määrittävät monikulmion.

polygon() Funktiot ja clip-path Ominaisuudet ja shape-outside Ominaisuudet käytetään yhdessä.

Esimerkki

Esimerkki 1

Leikkaa kuva monikulmioksi:

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

Kokeile itse

Esimerkki 2

Leikkaa kuva monikulmioksi:

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

Kokeile itse

Esimerkki 3

Käytetään polygon()、clip-path ja 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%);
}

Kokeile itse

CSS syntaksi

polygon(fill-rule, length-percentage)
Arvo Kuvaus
fill-rule

Valinnainen. Määritä täyttöehto. Voisi olla nonzero tai evenodd.

Oletusarvo on nonzero.
length-percentage

Välttämätön. Määritä monikulmion pisteet. Tämä voi olla pituus tai prosenttiosuus.

Jokainen piste on x ja y-koordinaatit. 0 0 määrittää vasemman yläkulman, 100% 100% määrittää oikean alakulman.

Tekninen yksityiskohta

Versio: CSS Shape Module Level 1

Selaimen tuki

Taulukossa olevat numerot ilmaisevat ensimmäisen selaimen version, joka täysin tukee tätä funktiota.

Chrome Edge Firefox Safari Opera
37 79 54 10.1 24

Liittyvät sivut

Viittaus:clip-path ominaisuus

Viittaus:shape-outside ominaisuus

Viittaus:circle() funktio

Viittaus:ellipse() funktio

Viittaus:inset() funktio