Unterschied zwischen clip-path und border-radius?

`border-radius` rundet die Ecken eines Rechtecks - es ist darunter weiterhin ein Rechteck. `clip-path` ersetzt das Rechteck durch ein beliebiges Polygon (oder Kreis, Ellipse, sogar einen SVG-Pfad) und blendet alles ausserhalb aus. border-radius für abgerundete Karten; clip-path, wenn die Form kein abgerundetes Rechteck ist - Dreiecke, Sechsecke, Pfeile in einen Tooltip, Banderolen-Ecken usw.

Beeinflusst clip-path das Layout?

Nein. Das Element behält für das Layout seine Originalbox - Margins, Borders und folgende Inhalte positionieren sich, als gäbe es keinen Clip. Hover- und Klickflächen behalten standardmässig ebenfalls das Originalrechteck, was überraschen kann: Ein als Dreieck geclipter Button feuert Hover auch im leeren Eckbereich. `pointer-events`-Regeln einsetzen oder die sichtbare Form in ein SVG wickeln, wenn Hit-Testing dem Clip folgen soll.

Kann man clip-path animieren?

Ja, aber nur zwischen Pfaden mit gleicher Punktzahl - der Browser interpoliert `polygon(0 0, 100% 0, 50% 100%)` zu einem anderen 3-Punkt-Polygon, aber nicht zu einem 4-Punkt-Polygon. Gleiches für `circle()` und `ellipse()`: gleiche Funktion, unterschiedliche Parameter animieren; Form-Funktionen mischen nicht. Für komplexe Morphs SVG-Pfad-Animationen nutzen.

Warum schneidet mein clip-path den Rand?

Ränder liegen innerhalb des Clips, daher wird ein dicker Rand an einem dreieckig geclipten Div entlang der Diagonalen zerschnitten. Zwei Fixes: SVG mit `stroke`-Attribut (sauber, skaliert sauber), oder `filter: drop-shadow()` mit kleinem Spread statt Rand (clip-bewusster Schatten folgt der sichtbaren Form).

`clip-path: polygon(...)` und Basisformen (`circle`, `ellipse`, `inset`) laufen in allen modernen Browsern. Pfadbasierte Clips (`path('...')`) brauchen Chrome 88+, Safari 13.1+, Firefox 97+. Das SVG-Element ` ` ist ein portabler Fallback für ältere Browser und unterstützt Pfade überall.

CSS-Clip-Path-Generator

Polygon-Clip-Paths visuell bauen - Dreieck, Sechseck, Stern, Sprechblase - mit Live-Vorschau und kopierfertigem CSS.

Voreinstellungen

Polygon-Punkte (x% y%, kommagetrennt)

CSS

clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);

Vorschau

Voreinstellung wählen, den Clip live an einem Beispielbild sehen, CSS kopieren. Die Polygon-Punkte stehen unter der Vorschau - Prozentwerte von Hand nachjustieren, falls ein Preset fast passt. Hintergrund zwischen Bild, Volltonfarbe und Verlauf umschalten: clip-path fügt weder Stroke noch Anti-Aliasing hinzu, Kontrast zur Umgebung zählt.

So funktioniert's

Voreinstellung wählen
Dreieck, Raute, Fünfeck, Sechseck, Achteck, Stern, Pfeil, Nachricht, Kreuz, Ticket - ein Klick lädt das Polygon.
Punkte anpassen
Die Prozent-Koordinaten unter der Vorschau bearbeiten, um zu feinen. Die Form aktualisiert sich beim Tippen.
Hintergrund testen
Zwischen Bild, Volltonfarbe und Verlauf wechseln, um zu prüfen, dass die geclipte Form auf den Zielflächen lesbar bleibt.
CSS kopieren
Die vollständige `clip-path: polygon(...)`-Deklaration steht bereit zum Einfügen ins Stylesheet.

Was ist das?

Ein CSS-Clip-Path-Generator baut die `clip-path`-Eigenschaft visuell. Die häufigste Form ist `polygon(x1 y1, x2 y2, ...)` - eine Liste von Prozentkoordinaten, die den sichtbaren Bereich des Elements definiert; alles ausserhalb wird ausgeblendet. Weitere Formfunktionen (`circle()`, `ellipse()`, `inset()`, `path()`) decken runde und beliebige Formen ab. Das Ergebnis ist GPU-beschleunigt und zwischen Varianten gleicher Form animierbar.

Wann verwenden

Hexagonale Avatar-Raster, Banderolen-Ecken auf Karten, dreieckige Pfeile an Tooltips und Chat-Blasen, diagonal geschnittene Hero-Sektionen, Ticket-Formen für Aktionen, Sternebewertungen als gefüllter Clip, Sprechblasen, schräge Trenner zwischen Page-Sektionen und SVG-freie Icon-Hintergründe.

Häufige Fehler

Vergessen, dass clip-path den Hit-Bereich nicht ändert - Nutzer klicken in die leere Dreiecksecke und triggern den Button trotzdem. Versuche, zwischen Polygonen mit unterschiedlicher Punktzahl zu animieren, enden mit einem Sprung statt Interpolation. clip-path auf ein Element mit dickem Rand anwenden und überrascht sein, dass der Rand zerschnitten wird. Prozente ohne fixiertes Seitenverhältnis - ein Dreieck auf breitem Element plattet sich zur Strieme.

FAQ

Unterschied zwischen clip-path und border-radius?: `border-radius` rundet die Ecken eines Rechtecks - es ist darunter weiterhin ein Rechteck. `clip-path` ersetzt das Rechteck durch ein beliebiges Polygon (oder Kreis, Ellipse, sogar einen SVG-Pfad) und blendet alles ausserhalb aus. border-radius für abgerundete Karten; clip-path, wenn die Form kein abgerundetes Rechteck ist - Dreiecke, Sechsecke, Pfeile in einen Tooltip, Banderolen-Ecken usw.
Beeinflusst clip-path das Layout?: Nein. Das Element behält für das Layout seine Originalbox - Margins, Borders und folgende Inhalte positionieren sich, als gäbe es keinen Clip. Hover- und Klickflächen behalten standardmässig ebenfalls das Originalrechteck, was überraschen kann: Ein als Dreieck geclipter Button feuert Hover auch im leeren Eckbereich. `pointer-events`-Regeln einsetzen oder die sichtbare Form in ein SVG wickeln, wenn Hit-Testing dem Clip folgen soll.
Kann man clip-path animieren?: Ja, aber nur zwischen Pfaden mit gleicher Punktzahl - der Browser interpoliert `polygon(0 0, 100% 0, 50% 100%)` zu einem anderen 3-Punkt-Polygon, aber nicht zu einem 4-Punkt-Polygon. Gleiches für `circle()` und `ellipse()`: gleiche Funktion, unterschiedliche Parameter animieren; Form-Funktionen mischen nicht. Für komplexe Morphs SVG-Pfad-Animationen nutzen.
Warum schneidet mein clip-path den Rand?: Ränder liegen innerhalb des Clips, daher wird ein dicker Rand an einem dreieckig geclipten Div entlang der Diagonalen zerschnitten. Zwei Fixes: SVG mit `stroke`-Attribut (sauber, skaliert sauber), oder `filter: drop-shadow()` mit kleinem Spread statt Rand (clip-bewusster Schatten folgt der sichtbaren Form).
Browser-Support?: `clip-path: polygon(...)` und Basisformen (`circle`, `ellipse`, `inset`) laufen in allen modernen Browsern. Pfadbasierte Clips (`path('...')`) brauchen Chrome 88+, Safari 13.1+, Firefox 97+. Das SVG-Element `<clipPath>` ist ein portabler Fallback für ältere Browser und unterstützt Pfade überall.