CSS polygon() Funktion

Definition und Verwendung

CSS polygon() Funktionen werden verwendet, um ein Polygon zu definieren.

polygon() Funktionen mit clip-path Eigenschaften und shape-outside Eigenschaften gemeinsam verwendet.

Beispiel

Beispiel 1

Das Bild in ein Polygon schneiden:

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

Versuchen Sie es selbst

Beispiel 2

Das Bild in ein Polygon schneiden:

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

Versuchen Sie es selbst

Beispiel 3

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

Versuchen Sie es selbst

CSS-Syntax

polygon(fill-rule, length-percentage)
Werte Beschreibung
fill-rule

Optional. Bestimmt die Füllregel. Dies kann nonzero oder evenodd sein.

Standardwert ist nonzero.
length-percentage

Notwendig. Bestimmt die Punkte, die die Polygonform definieren. Dies kann eine Länge oder ein Prozentsatz sein.

Jeder Punkt ist ein Paar von x- und y-Koordinaten. 0 0 definiert den linken oberen Eckpunkt, 100% 100% definiert den rechten unteren Eckpunkt.

Technische Details

Version: CSS Shape Module Level 1

Browser-Unterstützung

Die Zahlen in der Tabelle stellen die Versionsnummer der ersten Browser dar, die diese Funktion vollständig unterstützen.

Chrome Edge Firefox Safari Opera
37 79 54 10.1 24

zugehörige Seiten

Referenz:clip-path Eigenschaft

Referenz:shape-outside Eigenschaft

Referenz:circle() Funktion

Referenz:ellipse() Funktion

Referenz:inset() Funktion