Funkcja CSS polygon()

Definicja i użycie

CSS polygon() funkcje używane do definiowania wielokąta.

polygon() funkcje z clip-path cechy i shape-outside współdzielone cechy.

Przykład

Przykład

Przykład 2

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

Spróbuj sam

Przykład 1

Przykład 2

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

Spróbuj sam

Przykład 3

używaj polygon()、clip-path i 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%);
}

Spróbuj sam

Gramatyka CSS

polygon(fill-rule, length-percentage)
Wartość Opis
fill-rule

Opcjonalne. Określa zasadę wypełniania. Może to być nonzero lub evenodd.

Domyślna wartość to nonzero.
length-percentage

Wymagane. Określa punkty definiujące wielokąt. Może to być długość lub wartość procentowa.

Każdy punkt to para współrzędnych x i y. 0 0 definiuje lewy górny róg, 100% 100% definiuje prawy dolny róg.

Szczegóły techniczne

Wersja: Moduł CSS Shape Level 1

Wspieranie przeglądarek

Liczby w tabeli oznaczają wersje przeglądarek, które w pełni wspierają tę funkcję.

Chrome Edge Firefox Safari Opera
37 79 54 10.1 24

strony związane

Odniesienie:property clip-path

Odniesienie:property shape-outside

Odniesienie:Funkcja circle()

Odniesienie:Funkcja ellipse()

Odniesienie:Funkcja inset()