CSS-clip-path-Generator
Starten Sie mit einer vordefinierten Form oder verschieben Sie die Punkte des Polygons direkt, um Ihren eigenen Zuschnitt zu erstellen, und erhalten Sie den passenden CSS-Code clip-path mit Live-Vorschau. Alles läuft in Ihrem Browser, es wird nichts an einen Server gesendet.
Ziehen Sie die weißen Punkte in der Vorschau, um die Form anzupassen, oder fügen Sie unten Punkte hinzu bzw. entfernen Sie sie.
So funktioniert es
Die CSS-Eigenschaft clip-path schneidet ein Element entlang einer Form zu, die durch eine Liste von Punkten definiert ist, angegeben in Prozent der Breite und Höhe des Elements. Dieses Werkzeug bietet gängige vorgefertigte Formen (Dreieck, Sechseck, Band, Stern ...) und lässt Sie zusätzlich jeden Punkt mit der Maus oder dem Finger verschieben, um einen völlig individuellen Zuschnitt zu zeichnen.
Warum werden die Koordinaten in Prozent angegeben?
Prozentangaben statt Pixeln machen die zugeschnittene Form responsiv: Sie passt sich automatisch an die tatsächliche Größe des Elements an, auf das sie angewendet wird, anders als feste Werte, die den Zuschnitt auf einem anderen Bildschirm verzerren würden.
Funktioniert clip-path bei allen Bildern und Videos?
Ja, clip-path lässt sich in allen modernen Browsern auf die meisten HTML-Elemente anwenden, darunter Bilder, Videos, Buttons und Container. Planen Sie in Ihrem Layout jedoch einen Sicherheitsabstand ein, denn Inhalt außerhalb der zugeschnittenen Form wird unsichtbar, nimmt aber weiterhin seinen ursprünglichen Platz ein.
100% lokale Verarbeitung: Das Zeichnen des Polygons und der erzeugte Code bleiben vollständig in Ihrem Browser.