CSS-Clip-Path-Generator
Der CSS Clip-path Generator erzeugt clip-path-Werte für gängige Formen – Dreieck, Pfeil, Fünfeck, Sechseck, Stern, Chevron, Kreis, Ellipse und abgerundetes inset – mit Live-Vorschau.
Über dieses Tool
Der CSS Clip-path Generator erzeugt clip-path-Werte für gängige Formen – Dreieck, Pfeil, Fünfeck, Sechseck, Stern, Chevron, Kreis, Ellipse und abgerundetes inset – mit Live-Vorschau.
So funktioniert’s
- Wähle eine Form aus der Liste.
- Wähle eine Füllfarbe für die Vorschau.
- Klicke auf „CSS kopieren“ und wende den clip-path auf ein beliebiges Element oder Bild an.
Gut zu wissen
- clip-path blendet alles außerhalb einer Form aus, du brauchst also weder Bildmaske noch SVG-Datei.
- polygon() nimmt eine Liste von x-y-Punkten in Prozent entgegen, die mit dem Element skaliert.
- circle(50% at 50% 50%) beschneidet ein Element auf einen zentrierten Kreis.
- inset() mit round fügt einem rechteckigen Ausschnitt abgerundete Ecken hinzu.
- Die Grundformen von clip-path werden von allen aktuellen großen Browsern unterstützt.
Läuft komplett in deinem Browser – nichts, was du eingibst, wird hochgeladen oder gespeichert.
Häufige Fragen
Wie schneide ich ein Bild mit CSS in eine Form?
Wende einen clip-path auf das Bild an, zum Beispiel clip-path: polygon(50% 0%, 0% 100%, 100% 100%); für ein Dreieck.
Was ist der Unterschied zwischen clip-path und mask?
clip-path schneidet eine hartkantige Vektorform aus. mask nutzt ein Bild oder einen Verlauf und kann weiche, teilweise transparente Kanten erzeugen.
Lässt sich clip-path animieren?
Ja – wenn beide Formen dieselbe Funktion und dieselbe Anzahl an Punkten nutzen, kann der Browser zwischen ihnen überblenden.
Wirkt sich clip-path auf Klicks aus?
Ja. Bereiche außerhalb der ausgeschnittenen Form werden nicht gerendert und empfangen keine Pointer-Events.