CSS/Funktionen/polygon()

Browserunterstützung
caniuse.com

Die CSS-Funktion polygon() erzeugt ein Polygon (Vieleck). Es handelt sich um eine grundlegende Formfunktion des Datentyps <basic-shape>. Ein Polygon besteht aus aneinanderhängenden Teilstrecken, die Übergangspunkte von einer Teilstrecke zur nächsten heißen Eckpunkte oder einfach Ecken.. Polygone werden automatisch vom Browser geschlossen, Sie müssen den ersten Eckpunkt nicht als letzten Eckpunkt wiederholen, um eine geschlossene Form zu erhalten.

anwendbar auf

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

Parameter

Syntax

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

   <eckpunkt>: <x> <y>

Die Funktionsargumente sind die Koordinaten der Eckpunkte, durch Komma getrennt. Ein Polygon mit weniger als drei Eckpunkten ergibt keine Fläche, deshalb ist ein Minimum von drei Punkten vorgeschrieben. Eine Obergrenze ist nicht festgelegt.

Optional kann als erstes Argument eine fill-rule übergeben werden, die bei komplexeren Polygonen mit sich kreuzenden Teilstrecken relevant ist.

Die Koordinaten sind als CSS-Längenangaben oder -Prozentwerte zu notieren.

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

  path()-Funktion für Beschneidungen

   
• Pfad-Animationen

  CSS-Animation entlang von Kurven, Schleifen und elliptischen Umlaufbahnen

   

Weblinks

• CSSWG.org: polygon()
• MDN: polygon()
• Browser-Support: caniuse.com