CSS-Clip-Path-Generator
Bearbeiten Sie CSS-clip-path-Formen visuell mit Vorlagen, verschiebbaren Polygonpunkten und Reglern. Kopieren Sie das clip-path-CSS.
🔒 Läuft vollständig in Ihrem Browser — nichts wird hochgeladenCSS-clip-path-Formen visuell gestalten
Mit der Eigenschaft clip-path können Sie ein Element allein mit CSS in nahezu jede Form zuschneiden. Sechseckige Avatare, schräge Abschnittskanten, pfeilförmige Buttons und Sprechblasen lassen sich ganz ohne Bilder oder zusätzliches Markup umsetzen. Polygon-Koordinaten von Hand zu schreiben ist allerdings mühsam. Dieser Generator bietet Ihnen eine Live-Vorschau mit verschiebbaren Anfassern, sodass Sie das Element formen und die fertige Deklaration kopieren können.
Polygone, Kreise, Ellipsen und Insets
Das Tool unterstützt die wichtigsten Grundform-Funktionen. polygon() erwartet eine Liste von Punkten, angegeben als x- und y-Prozentwerte – ideal für Dreiecke, Trapeze, Sterne und Pfeile. circle() und ellipse() erwarten einen Radius und eine Mittelpunktposition, und inset() schneidet von jeder Kante des Rahmens nach innen, optional mit abgerundetem Eckradius. Wählen Sie eine Vorlage als Ausgangspunkt und verfeinern Sie sie. Bei Polygonen ziehen Sie einen beliebigen Anfasser, um einen Eckpunkt zu verschieben, oder fokussieren einen Anfasser und nutzen die Pfeiltasten für präzise Schritte von einem Prozent – mit gedrückter Umschalttaste für größere Sprünge.
Tipps zur Verwendung von clip-path
Da alle Werte Prozentangaben sind, skaliert die Form mit dem Element, was sie ideal für responsive Layouts macht. Denken Sie daran, dass clip-path nur die Darstellung beeinflusst: Rahmen und Box-Shadows außerhalb der Form werden ebenfalls weggeschnitten. Verwenden Sie daher ein Wrapper-Element mit filter: drop-shadow(), wenn Sie einen Schatten benötigen, der der Form folgt. Sie können außerdem mit CSS-Transitions zwischen zwei Polygonen mit derselben Anzahl an Punkten animieren und so fließende Morphing-Effekte erzielen. Der erzeugte Code ist eine einzige Zeile, die Sie in jedes Stylesheet einfügen können, und die gesamte Bearbeitung findet lokal in Ihrem Browser statt.
So verwenden Sie
- Vorlage wählenBeginnen Sie mit einer Form wie Dreieck, Sechseck, Stern, Pfeil, Kreis oder eingerücktem Rechteck.
- Form bearbeitenZiehen Sie die Polygon-Anfasser oder verwenden Sie die Regler für Kreis-, Ellipsen- und Inset-Formen.
- Punkte hinzufügen oder entfernenWählen Sie einen Punkt aus und fügen Sie dahinter einen weiteren hinzu oder entfernen Sie ihn, um das Polygon zu verfeinern.
- CSS kopierenKopieren Sie die clip-path-Deklaration und wenden Sie sie auf ein beliebiges Element an.