◇

CSS clip-path Generator

Schneide ein Element in gängige Formen und kopiere das clip-path CSS.

Deine Dateien bleiben auf diesem Gerät

Dateien werden im Browser verarbeitet, nie hochgeladen. Die Website lädt den benötigten Code und die Ressourcen herunter. Ohne Konto und Tracker.

Speichere dieses Tool über Herunterladen als einzelne HTML-Datei zur Offline-Nutzung.

Datenschutz →

Form

Ausgabe

Probiere ein durchgerechnetes Beispiel

Beispiel

Wähle die Form Sechseck und erhalte clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);. Jedes Paar ist eine x- und y-Position im Element, die Form dehnt sich also mit Breite und Höhe des Elements.

Gut zu wissen

Clipping blendet Teile des Elements aus, behält aber seine Layout-Box: Nachbarn verschieben sich nicht, und die ausgeblendeten Ecken reagieren nicht mehr auf Klicks. Rahmen und Box-Schatten werden mit abgeschnitten; für einen Schatten setze einen drop-shadow-Filter auf ein umgebendes Element.

Über dieses Tool

Wähle eine Form und schneide eine Vorschaubox sofort mit der passenden clip-path-Regel zu, dann kopiere das einsatzbereite CSS. Die Vorschau aktualisiert sich live, vollständig in deinem Browser.

Häufig gestellte Fragen

Wie funktionieren Polygon-clip-paths?

Jeder Punkt ist ein x-y-Prozentpaar relativ zur Box; der Browser verbindet sie der Reihe nach und zeigt nur den Bereich innerhalb des Umrisses.

Unterstützen alle Browser clip-path?

Polygon-, Kreis-, Ellipsen- und Inset-Formen werden in jedem modernen Browser unterstützt, daher funktioniert das erzeugte CSS ohne Präfixe.