CSS/Funktionen/polygon()

Browserunterstützung
caniuse.com

Die CSS-Funktion polygon() erzeugt ein Vieleck. Es handelt sich um eine grundlegende Formfunktion des Datentyps <basic-shape>.

anwendbar auf

• clip-path
• offset-path
• shape-outside

Parameter

Syntax

polygon([<fill-rule> ] <length-percentage> <length-percentage>, ... )

• ein oder mehrere Koordinatenpaare, von denen jedes einen Scheitelpunkt der Form darstellt.
• optional eine Angabe der fill-rule

Beispiel

.triangle {
  width: 400px;
  height: 400px;
  background-color: steelBlue;
  clip-path: polygon(100% 0%, 50% 50%, 100% 100%);
}

Das Element mit der Klasse triangle wird zu einem Dreieck beschnitten.

Beachten Sie: Das SVG-polygon-Element hat abweichende Attribute für Füllregeln und Punkte, und Punkte sind flexibel in Bezug auf die Verwendung von Leerzeichen und Kommas als Trennzeichen.
Die CSS polygon()-Regeln für Trennzeichen (x und y durch Leerzeichen getrennt, dann ein Komma) müssen eingehalten werden.

Siehe auch

• Masken und Beschneidungen
  polygon()-Funktion für Beschneidungen
• offset-path
  CSS-Animation entlang von Pfaden

Weblinks

• CSSWG.org: polygon()
• MDN: polygon()

Browserunterstützung
caniuse.com