Wählen Sie eine Form, ziehen Sie die Punkte oder tippen Sie X- und Y-Prozente ein und kopieren Sie den erzeugten clip-path. Die Vorschau nutzt dieselben Deklarationen.
Läuft lokal in deinem BrowserDer Editor bearbeitet eine einzelne polygon()-Form und schreibt die beiden Deklarationen, die ein Stylesheet braucht: die Zeile mit dem Präfix -webkit-clip-path und die Standardzeile clip-path. Fünf Vorlagen decken die üblichen Formen ab — Dreieck mit 3 Punkten, Raute mit 4, Sechseck mit 6 (die Voreinstellung), Stern mit 10 und Chevron mit 6 — und jeder Punkt lässt sich durch Ziehen am Griff auf der Fläche oder durch Eingabe eines X- und Y-Prozentsatzes bewegen.
Die Bühne ist eine Live-Vorschau genau dieses CSS: Das Polygon wird beim Ziehen auf das Vorschau-Element angewendet, und die Anzeige im Kopf zählt die Punkte. Die Koordinaten sind Prozentsätze der Box des Elements selbst, deshalb behält die Form ihre Proportionen, wenn sie auf ein anders großes Element angewendet wird.
Der Block enthält genau eine Regel: .clipped-element mit einer -webkit-clip-path-Zeile und einer clip-path-Zeile, beide mit demselben polygon()-Wert aus kommagetrennten x-y-Prozentpaaren. Sonst wird nichts geschrieben — kein Präfix außer -webkit-, keine CSS-Variablen und kein Selektor für Ihr Markup, ersetzen Sie .clipped-element also durch die Klasse, die Sie wirklich verwenden.
Die Paare sind Prozentsätze der Referenzbox, bei einem Element ohne eigene Angabe ist das die Border-Box. Die Form skaliert daher mit dem Element und hängt nicht von der Pixelgröße der Vorschaufläche ab.
Die Vorschau zeigt, was der von Ihnen verwendete Browser mit dem Wert macht; die Seite führt keine Kompatibilitätstabelle und erkennt Unterstützung nicht automatisch. Einfaches polygon()-Clipping funktioniert in aktuellen Chrome-, Edge-, Firefox- und Safari-Versionen, und die -webkit-Zeile hält ältere iOS- und Safari-Versionen am Leben. Prüfen Sie trotzdem die Engines Ihres Publikums, bevor die Form Bedeutung trägt: ohne Unterstützung wird die ganze Box gezeichnet.
Das Clipping ist nicht nur optisch: Ein Klick außerhalb des Polygons trifft das Element nicht, was wichtig ist, wenn die beschnittene Form ein Link oder Button ist und die Trefferfläche zum sichtbaren Umriss passen soll.
Ein Polygon braucht drei Punkte und verträgt zwölf. Punkt hinzufügen teilt die Kante nach dem aktiven Punkt, Punkt entfernen löscht den aktiven, und die Statuszeile nennt beide Grenzen in der Sprache der Seite. Die Liste Aktiver Punkt folgt der Reihenfolge der Erstellung — und damit der Reihenfolge der Paare in polygon().
Alles läuft in der Seite: Die Form berechnet der Browser, kein Wert wird hochgeladen, und die Seite arbeitet auch ohne Netzverbindung weiter. Das Vorschau-Element erhält dieselbe Deklaration, die das Code-Feld zeigt; es gibt also keine zweite Umsetzung, die vom kopierten CSS abweichen könnte.