CSS/Funktionen/polygon()

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

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
anwendbar auf	* clip-path offset-path shape-outside
Browsersupport	caniuse: {{{caniuse}}}

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.

Weblinks

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

Browserunterstützung
caniuse.com

Siehe auch

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