Clip-Path-Generator
Schneiden Sie Elemente zu Pfeilen, Sternen, Sechsecken oder eigenen Polygonen zu — ziehen Sie Punkte auf der Leinwand und kopieren Sie den clip-path-Code.
Punkte ziehen zum Umformen · Doppelklick auf die Leinwand fügt einen Punkt hinzu
So verwenden Sie den Clip-Path-Generator
- Wählen Sie eine Preset-Form oder beginnen Sie, die Punkte des Standard-Fünfecks zu ziehen.
- Doppelklicken Sie an beliebiger Stelle auf die Leinwand, um einen neuen Punkt an der nächsten Kante einzufügen.
- Wählen Sie einen Punkt und drücken Sie „Punkt löschen“, um ihn zu entfernen (mindestens 3 Punkte).
- Wechseln Sie in den Kreis-, Ellipsen- oder Inset-Modus für parametrische Formen mit abgerundeten Ecken.
- Kopieren Sie die clip-path-Deklaration — Prozentwerte halten die Form bei jeder Größe responsiv.
Über diesen Clip-Path-Generator
Die CSS-Eigenschaft clip-path schneidet ein Element auf eine Grundform zu — Polygon, Kreis, Ellipse oder Inset — und verbirgt alles außerhalb davon. Sie ist der Standardweg für nicht-rechteckige Layouts: schräge Abschnittsteiler, sechseckige Bildgrids, Pfeile, Sprechblasen und Sternebewertungen — alles ohne Bilder oder SVG.
Dieser Editor lässt Sie Formen visuell gestalten: Ziehen Sie Polygon-Eckpunkte auf der Leinwand, doppelklicken Sie, um Punkte hinzuzufügen, oder starten Sie mit 15 handabgestimmten Presets. Alle Koordinaten sind Prozentwerte, Ihre Formen skalieren also mit dem Element. Die Ausgabe enthält das -webkit-clip-path-Präfix für ältere Safari-Versionen und eine Tailwind-Arbitrary-Value-Klasse für Utility-First-Projekte.
Clip-Path FAQ
Wie füge ich Polygon-Punkte hinzu oder entferne sie?
Doppelklicken Sie an beliebiger Stelle auf die Leinwand — ein neuer Punkt wird an der nächstgelegenen Kante an dieser Stelle eingefügt. Um einen Punkt zu entfernen, klicken Sie ihn zur Auswahl an (er wird rot) und drücken „Punkt löschen“. Ein Polygon behält immer mindestens 3 Punkte.
Welches Koordinatensystem verwendet clip-path polygon?
Jeder Punkt ist ein x/y-Paar, gemessen von der oberen linken Ecke des Elements. Dieser Generator verwendet Prozentwerte: 0% 0% ist oben links und 100% 100% ist unten rechts. Prozentkoordinaten skalieren automatisch mit dem Element und halten Ihre Form responsiv.
Kann ich einen clip-path animieren?
Ja — clip-path ist in CSS animierbar, solange Start- und Endform denselben Typ mit derselben Punktzahl haben (bei Polygonen). Gestalten Sie Ihre beiden Zustände hier, halten Sie die Punktzahlen gleich und überblenden Sie mit transition: clip-path .3s.
Beeinflusst clip-path Kindelemente und Overflow?
clip-path schneidet das gesamte Element zu, einschließlich Kinder, Rahmen und sogar box-shadow — alles außerhalb der Form wird verborgen und ist nicht klickbar. Wenn Sie einen Schatten um eine zugeschnittene Form brauchen, verwenden Sie stattdessen drop-shadow() als Filter auf einem Elternelement.
Was ist der Unterschied zwischen clip-path und SVG clipPath?
Die clip-path-Grundformen von CSS (Polygon, Kreis, Ellipse, Inset) decken die meisten Layout-Anforderungen mit einer einzigen Codezeile ab und sind animierbar. SVG clipPath unterstützt komplexe Pfade mit Kurven — verwenden Sie CSS-Formen für geometrische Designs (dieses Werkzeug) und SVG, wenn Sie Bézierkurven brauchen.