CSS-Clip-Path-Generator

Formen und Funktionen

Anwendungsideen

Mit clip-path entstehen diagonale Abschnitte („Slanted Edges“), Hexagon-Galerien, Pfeil-Buttons, Sprechblasen und ausgefallene Bildmasken – ganz ohne Grafiken. Häufig setzt man ihn für Hero-Bereiche mit schräger Unterkante ein: clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%). Für animierte Übergänge lässt sich clip-path mit transition zwischen zwei Polygonen mit gleicher Punktzahl animieren – etwa für Reveal-Effekte beim Hover.

Beachte, dass abgeschnittene Bereiche nicht klickbar sind und Schatten mitgeschnitten werden. Für Schatten um die Form legst du filter: drop-shadow() auf ein Elternelement. Für Barrierefreiheit gilt: Wichtige Inhalte dürfen nicht in abgeschnittene Bereiche geraten.

Wofür du den Clip-Path-Generator brauchst

Freisteller müssen nicht in der Bildbearbeitung entstehen. Du baust eine Teamseite und willst sechs Porträts als Sechsecke zeigen: Vorlage „Sechseck“ anklicken, den Wert ins CSS übernehmen, und jedes Bild skaliert mit – ohne dass du sechs Dateien zuschneidest. Für einen Blogbeitrag mit Zitat setzt du die Vorlage „Sprechblase“, für einen Link-Button „Pfeil rechts“, und der Hero-Bereich deiner Startseite bekommt mit „Schräge Kante“ einen schrägen Übergang zum nächsten Abschnitt.

Wer eigene Formen braucht, editiert die Prozentwerte im Textfeld direkt: Jedes Paar beschreibt einen Punkt der Form, die Vorschau zeigt die Änderung sofort auf der gewählten Füllung. Wer die Kante besser beurteilen will, wechselt die Vorschau-Füllung zwischen Farbverlauf, Blau und Orange. Der kopierte Code enthält neben clip-path auch die Webkit-Variante für ältere Safari-Versionen. Weiche Ecken für dieselbe Box erzeugt der Border-Radius-Generator.

Wer von freigestellten Formen profitiert – und wer nicht

Zuerst profitieren Frontend-Entwickler und Webdesigner, die Bildmasken und Formen ohne Grafikprogramm umsetzen: ein Porträt als Sechseck, ein Pfeil-Button oder eine Sprechblase entstehen aus wenigen Prozentwerten und bleiben bis zur letzten Auflösung scharf. Auch Redakteure und Betreiber kleiner Seiten setzen die Vorlagen, wenn Bildteaser oder Zitatboxen auffälliger wirken sollen. Im Unterricht zeigt der Generator, wie sich ein Polygon aus Koordinaten aufbauen lässt, und für Symbole spart das Verfahren Dateien, weil die Form im CSS steht statt in einer Grafik.

clip-path beschneidet nur die Darstellung: Das Layout bleibt rechteckig, abgeschnittene Bereiche sind nicht klickbar, und Rahmen oder Schatten werden mit entfernt. Wer nur runde Ecken braucht, ist mit dem CSS-Flexbox-Generator und den übrigen Eigenschaften besser beraten als mit einem Beschnitt.