Was ist clip-path und wann nutze ich es?
clip-path ist eine CSS-Eigenschaft, die ein Element auf eine bestimmte Form zuschneidet. Setz `clip-path: polygon(50% 0, 100% 100%, 0 100%)` und ein simples div wird zu einem Dreieck. Alles außerhalb der Form verschwindet.
Hier bekommst du fertige Presets (Dreieck, Sechseck, Achteck, Stern, Pfeil, Sprechblase, Blitz) plus einen interaktiven Editor. Klick in die Fläche, um einen Punkt hinzuzufügen, zieh einen Punkt zum Verschieben, Doppelklick zum Entfernen. Kreis und Ellipse haben eigene Presets mit zwei Drag-Handles.
Die Ausgabe ist eine kopierfertige `clip-path: ...`-CSS-Zeile, die du in dein Stylesheet einfügst.
So nutzt du es
- Wähl ein Preset aus der rechten Spalte (Dreieck, Stern, Pfeil, Sprechblase). Jedes kommt mit Stützpunkten zum Feintuning.
- Zieh einen beliebigen weißen Punkt zum Verschieben. Positionen sind in Prozent (0-100%), die Form skaliert also mit dem Element.
- Klick in eine leere Fläche, um einen neuen Stützpunkt hinzuzufügen (nur im Polygon-Modus). Nützlich für komplexe eigene Formen.
- Doppelklick auf einen Stützpunkt entfernt ihn. Mindestens 3 Stützpunkte (Dreieck).
- Kopiere das entstandene CSS und füg es in den Style deines Elements ein.
Wann das hilft
Clip-path ist seit 2018 ein Standardwerkzeug im modernen Webdesign (überall unterstützt). Statt für jede ungewöhnliche Form ein Bild zu exportieren, machst du das rein in CSS:
- Diagonaler Section-Divider (eine schräge Linie, die zwischen Sektionen schneidet). Ein Klassiker in Portfolios und SaaS-Landingpages.
- Hero mit Foto, das auf ein Nicht-Rechteck zugeschnitten ist. Sechseck statt Rechteck ist ein starker visueller Hook.
- Hex-förmige Avatare (Discord und Slack haben Ähnliches).
- Tag-förmige Promo-Karte (Blitz, Pfeil). Auffälliger als ein Rechteck.
- Chat-Sprechblase ohne den Schwanz mit einem ::after-Pseudo-Element zu zeichnen.
- Reveal-Animation: `transition: clip-path 0.5s`, kleiner Wert zu großem Wert ergibt einen Wipe-in-Effekt.
- Karte mit abgeschnittener Ecke - klassisch in Sci-Fi-UI.
Um einen Schatten unter einer geclippten Form zu setzen, nutze `filter: drop-shadow()` (box-shadow folgt clip-path nicht). Für weichere organische Formen sieh den Border-Radius-Generator.