CSS clip-path

Polygon-Griffe ziehen → polygon() Code

Formen

4 points

Punkt #1

X %

Y %

Editor (drag handles)

Preview

CSS

clip-path: polygon(50.0% 0.0%, 100.0% 50.0%, 50.0% 100.0%, 0.0% 50.0%);

Wie man es benutzt

Wählen Sie eine Vorgabe-Form oder beginnen Sie mit dem Standard-Polygon im SVG-Editor.
Ziehen Sie die kreisförmigen Griffe, um jeden Polygon-Scheitelpunkt zu verschieben.
Fügen Sie einen neuen Punkt hinzu (eingefügt in der Mitte der ausgewählten Kante) oder entfernen Sie den ausgewählten Punkt.
Feinabstimmung exakte X/Y-Prozentsätze in den Koordinaten-Eingaben.
Kopieren Sie den generierten clip-path CSS und fügen Sie ihn in Ihren Stylesheet ein.

Beispiele

Das Ziehen eines Dreieck-Griffs zu 50% 0%, 0% 100%, 100% 100% erzeugt clip-path: polygon(50.0% 0.0%, 0.0% 100.0%, 100.0% 100.0%).
Das Hinzufügen eines Punktes auf der rechten Kante eines Rechtecks und das Ziehen nach außen erzeugt eine Pfeilform in Echtzeit.

Ergebnisse vor dem Produktiveinsatz prüfen. Keine Gewährleistung — siehe Nutzungsbedingungen.