Clip-Path-Generator
Komplexe CSS-Clip-Paths visuell gestalten.
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);- Zum Umformen klicken und ziehen
- Voreinstellungen für schnelle Formen verwenden
- 'Polygon'-Modus für benutzerdefinierte Formen ausprobieren
Empfohlene Tools
Handverlesene Dienstprogramme, die Sie nützlich finden könnten
Eigene Formen mit CSS clip-path zuschneiden
Überblick
Die CSS-Eigenschaft clip-path erlaubt es, ein Element in eine eigene Form zu beschneiden — Dreieck, Sechseck, Pfeil, Blob oder ein beliebiges Polygon — ohne Bilder zu bearbeiten. Eine mächtige Art, nicht-rechteckiges Design ohne Extra-Dateien hinzuzufügen. Da das Schreiben der Koordinaten von Hand mühsam ist, lässt dich dieser clip-path-Generator Punkte visuell ziehen und kopiert das exakte CSS, alles im Browser.
So gehts (Schritt für Schritt)
- 1
Form wählen oder zeichnen
Beginne mit einem Preset (Dreieck, Sechseck, Kreis) oder setze Punkte für ein eigenes Polygon.
- 2
Punkte ziehen
Verschiebe die Ecken in der Live-Vorschau, bis die Form stimmt.
- 3
clip-path-CSS kopieren
Füge den erzeugten clip-path-Wert auf dein Element ein, um es auf diese Form zu beschneiden.
Funktionsweise
Du wählst oder zeichnest eine Form, und das Tool definiert sie mit clip-path — meist ein polygon() aus Prozent-Koordinaten oder ein Preset wie circle() oder ellipse(). Alles außerhalb der Form wird transparent, sodass das Element nur innerhalb der Kontur zu sehen ist. Du ziehst die Punkte in einer Live-Vorschau, und das Tool schreibt den passenden clip-path-Wert zum Einfügen auf jedes Element.
Wann verwenden
Ein Bild oder einen Abschnitt in eine schräge oder geometrische Form beschneiden. Einen diagonalen Trenner zwischen Seitenabschnitten erstellen. Einen sechseckigen Avatar oder ein Badge machen. Einer Hervorhebung eine Pfeil- oder Sprechblasenform geben. Ein nicht-rechteckiges Hero oder eine Karte gestalten. Lernen, wie Polygon-Koordinaten auf eine sichtbare Form abbilden.
Häufig Gestellte Fragen
Er wird weggeschnitten — vollständig transparent und nicht interaktiv, Klicks gehen also hindurch. Das Element zeigt sich und reagiert nur innerhalb der Kontur; die zugrunde liegende Layout-Box belegt weiterhin ihren ursprünglichen Platz.
Wichtige Hinweise
clip-path beschneidet visuell, aber die Box des Elements belegt im Layout weiterhin ihren vollen rechteckigen Platz, was Überlappungen oder Abstands-Überraschungen verursachen kann. Zudem wird beschnittener Inhalt nur verborgen, nicht entfernt — verlass dich nicht darauf, um sensible Informationen zu verstecken.