Beeinflusst CSS clip-path Klick- und Hover-Bereiche?

Ja, das tut es. Der abgeschnittene Bereich wird vollständig aus dem interaktiven Bereich des Elements entfernt, sodass Klick- und Hover-Ereignisse nur innerhalb der sichtbaren Form registriert werden. Wenn Sie Hover-Effekte auf der gesamten Bounding-Box benötigen, aber nur visuelles Clipping wollen, brauchen Sie möglicherweise JavaScript-Workarounds oder pointer-events-Anpassungen.

Wie animiere ich eine CSS clip-path-Form?

Sie können zwischen zwei clip-path-Werten mit CSS-Übergängen oder Animationen wechseln, solange beide dieselbe Formfunktion und dieselbe Anzahl von Punkten verwenden. Zum Beispiel funktioniert der Übergang zwischen zwei polygon()-Definitionen mit identischer Punktzahl reibungslos. Der Übergang zwischen circle() und polygon() funktioniert nicht — der Browser hat keine Möglichkeit, sie zu interpolieren.

Warum verschwindet mein box-shadow mit clip-path?

Weil clip-path alles außerhalb der Formgrenze beschneidet, einschließlich box-shadow, das außerhalb der Element-Bounds gerendert wird. Die Lösung ist filter: drop-shadow() — es wendet den Schatten nach dem Compositing an und folgt so der tatsächlich sichtbaren Form statt der Bounding-Box.

Kann ich clip-path für responsive Designs verwenden?

Ja, wenn Sie prozentbasierte Werte in polygon() oder anderen Funktionen verwenden. Prozentwerte sind relativ zu den eigenen Abmessungen des Elements, sodass die Form proportional skaliert, wenn das Element in der Größe geändert wird. Feste Pixelwerte in clip-path skalieren nicht.

Wird clip-path in mobilen Browsern unterstützt?

Moderne mobile Browser (iOS Safari 13.4+, Chrome für Android) unterstützen die grundlegenden clip-path-Formfunktionen ohne Präfixe. SVG-basiertes clip-path hat eine etwas breitere Abdeckung für ältere Geräte. Die Hauptlücke sind ältere iOS-Safari-Versionen, die für einige Syntaxen das -webkit-Präfix benötigten.

CSS clip-path: Eigene Formen ohne SVG-Komplexität erstellen

Das erste Mal, als ich ein hexagonales Avatar bemerkte

Das erste Mal, dass ich wirklich stehen blieb und eine Website anstarrte, um herauszufinden wie es gemacht wurde, war als ich hexagonale Benutzer-Avatare auf einer Gaming-Rangliste sah. Nicht rund — hexagonal. Sechseckig. Mein erster Gedanke war, dass sie eine benutzerdefinierte PNG-Maske oder einen Canvas-Trick verwendet haben mussten. Es stellte sich heraus, dass es sechs Zeilen CSS waren.

Das war meine Einführung in clip-path, und es hat wirklich verändert, wie ich über Formen im Webdesign denke. Früher bedeutete "Form" border-radius, SVG oder Bilder. Jetzt ist der Browser selbst Ihr Schneidewerkzeug.

Eine kurze Geschichte: Wie wir hierher kamen

Bevor clip-path eine CSS-Eigenschaft war, bedeutete das Erstellen nicht-rechteckiger Formen, durch einige schmerzhafte Hürden zu springen. Sie konnten SVG-clipPath-Elemente verwenden und sie aus Ihrem CSS referenzieren, was funktionierte, aber erforderte, dass Sie Formen in einer völlig anderen Syntax in einem anderen Teil Ihres Markups definieren. Alternativ verwendeten Sie overflow: hidden mit cleverer Positionierung und border-radius-Hacks — was Ihnen abgerundete Formen gab, aber nichts wirklich Eckiges oder Beliebiges.

Die CSS-clip-path-Eigenschaft hat dies standardisiert. Statt SVG zu jonglieren, schreiben Sie Ihre Formdefinition direkt in CSS. Der Browser erledigt das Masking. Es ist eine dieser Funktionen, die Sie nachträglich über die verschwendete Zeit mit älteren Ansätzen ärgern.

Die Formfunktionen, eine nach der anderen

`polygon()` — Das Arbeitstier

polygon() ist das, was Sie am meisten verwenden werden. Es nimmt eine Liste von Koordinatenpaaren, die die Eckpunkte einer Form definieren. Standardmäßig sind Koordinaten Prozentsätze der Breite und Höhe des Elements.

Ein einfaches Dreieck:

.triangle {
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

Das liest sich als: oben-mitte, unten-links, unten-rechts. Drei Punkte, ein Dreieck.

Ein Parallelogramm (großartig für diagonale Abschnittsunterteilungen):

.parallelogram {
  clip-path: polygon(10% 0%, 100% 0%, 90% 100%, 0% 100%);
}

Ein Hexagon — die Form, die meine ganze clip-path-Reise begann:

.hexagon {
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

Sechs Punkte, sechs Koordinatenpaare. Das ist alles.

Die Syntax wird schnell ausführlich, wenn viele Punkte vorhanden sind, weshalb ein visueller Generator so nützlich ist. Das manuelle Berechnen von Eckpunkten für eine Sternform bedeutet zum Beispiel Trigonometrie, die Sie definitiv nicht von Hand machen wollen.

Ein fünfzackiger Stern zur Referenz:

.star {
  clip-path: polygon(
    50% 0%, 61% 35%, 98% 35%, 68% 57%,
    79% 91%, 50% 70%, 21% 91%, 32% 57%,
    2% 35%, 39% 35%
  );
}

Zehn Koordinatenpaare. Definitiv nichts, was Sie manuell eingeben möchten.

`circle()` — Einfacher, weniger flexibel

.avatar {
  clip-path: circle(50%);
}

Dies schneidet das Element auf einen Kreis mit einem Radius von 50% — effektiv dasselbe wie border-radius: 50%, aber ohne das Layout zu beeinflussen. Sie können auch den Mittelpunkt angeben:

.off-center-circle {
  clip-path: circle(40% at 60% 50%);
}

Ehrliche Einschätzung: border-radius ist für einfache kreisförmige Bilder immer noch meist die bessere Wahl. clip-path: circle() macht mehr Sinn, wenn Sie den Kreis mit anderen clip-path-Effekten interagieren lassen oder animieren möchten.

`ellipse()` — Die gestreckte Verwandte des Kreises

.ellipse-crop {
  clip-path: ellipse(60% 40% at 50% 50%);
}

Die ersten beiden Werte sind horizontale und vertikale Radien. Nützlich für ovale Bildausschnitte oder das Erstellen linsenförmiger Formen.

`inset()` — Die Unterschätzte

Diese erhält kaum genug Aufmerksamkeit. inset() schneidet das Element auf einen rechteckigen Bereich, der durch Einrückwerte von jeder Kante definiert wird — wie ein umgekehrtes Padding:

.inset-crop {
  clip-path: inset(10px 20px 10px 20px);
  /* oben rechts unten links */
}

Sie können dem eingerückten Rechteck auch border-radius hinzufügen:

.rounded-inset {
  clip-path: inset(10% round 12px);
}

Wo inset() wirklich glänzt, sind Karten-Ausschnitte und Kerb-Effekte — jene Designs, bei denen ein Stück einer Karte an einer Ecke "ausgestanzt" erscheint. Mit Standard-CSS schwer umzusetzen, mit inset() kombiniert mit einem kreativen Hintergrund trivial.

Reale Anwendungsfälle

Diagonale Hero-Bereichs-Trennlinien

Der geneigte Separator zwischen einem Hero-Bereich und dem Inhalt darunter ist überall. So wird es gemacht:

.hero {
  clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
}

Dies schneidet die untere Kante des Heroes in einem Winkel, wodurch ein diagonaler Schnitt entsteht. Der Inhalt darunter fließt natürlich in den Raum.

Hexagonale Benutzer-Avatare

Der Klassiker. Direkt auf ein img-Tag anwenden:

.avatar-hex {
  width: 120px;
  height: 120px;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  object-fit: cover;
}

object-fit: cover stellt sicher, dass das Bild den Raum füllt, bevor es abgeschnitten wird. Ohne es gibt es Letterboxing.

Abgewinkelte Karten-Dekorationen

Eine Karte mit einer abgeschnittenen rechten unteren Ecke — ein subtiles Detail, das raffiniert wirkt:

.notched-card {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%);
}

Die zwei Fallstricke, die Sie erwischen werden

Fallstrick 1: clip-path frisst Ihren box-shadow

Das erwischt beim ersten Mal fast jeden. Sie fügen einem Karten einen schönen Schlagschatten hinzu, wenden clip-path für diesen diagonalen Schnitt an, und der Schatten verschwindet. Das liegt daran, dass clip-path alles außerhalb der Formgrenze abschneidet — einschließlich Schatten, die außerhalb der Box des Elements gerendert werden.

Die Lösung ist filter: drop-shadow():

/* Dies wird abgeschnitten */
.broken {
  clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

/* Dies funktioniert korrekt */
.fixed {
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.2));
  clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
}

filter: drop-shadow() wird nach dem Compositing angewendet und folgt dem tatsächlichen sichtbaren Formumriss. Sie können den CSS Box Shadow Generator verwenden, um Ihren Schatten zu gestalten und die Werte dann zu übersetzen.

Fallstrick 2: Hover- und Klickbereiche folgen dem Clip

Das ist logisch, wenn man darüber nachdenkt, aber es überrascht die Leute. Der abgeschnittene Bereich ist visuell und funktional weg. Mausereignisse werden im abgeschnittenen Bereich nicht ausgelöst. Wenn Ihr Design eine Ecke abschneidet, auf die ein Benutzer vernünftigerweise klicken könnte, wird dieser Klick nicht registriert.

clip-path animieren (und wann es nicht funktioniert)

Die gute Nachricht: clip-path ist animierbar. Der Browser kann zwischen zwei Polygonformen reibungslos interpolieren:

.btn {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  transition: clip-path 0.3s ease;
}

.btn:hover {
  clip-path: polygon(0 0, 100% 0, 85% 100%, 0 100%);
}

Dies animiert einen rechteckigen Button beim Hover zu einer diagonalen Schnittecke. Sauber, reibungslos, kein JavaScript.

Die schlechte Nachricht: Sie können nur zwischen der gleichen Formfunktion mit der gleichen Anzahl von Punkten animieren. Der Versuch, von circle() zu polygon() zu wechseln, erzeugt einen harten Sprung — keine Interpolation. Und der Wechsel zwischen zwei Polygonen mit unterschiedlicher Punktzahl schlägt ebenfalls fehl.

Responsives clip-path

Funktioniert clip-path responsiv? Ja, wenn Sie prozentbasierte Werte verwenden.

/* Dies skaliert korrekt */
.responsive-diagonal {
  clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
}

Feste Pixelwerte in clip-path skalieren nicht:

/* Dies sieht auf kleinen Bildschirmen falsch aus */
.broken-responsive {
  clip-path: polygon(0 0, 800px 0, 800px 90%, 0 100%);
}

Halten Sie sich für jede Form, die in einem fluid Container lebt, an Prozentsätze. Sie können calc() mit Prozentsätzen für spezifische Anpassungen kombinieren:

.notched {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 30px), calc(100% - 30px) 100%, 0 100%);
}

Den Generator verwenden

Polygonkoordinaten von Hand einzugeben ist eine frustrierende Übung. Ein visueller clip-path-Generator ändert den Workflow völlig — Sie ziehen Handles auf einer Vorschau, sehen die Form in Echtzeit und kopieren das CSS, wenn es richtig aussieht.

So nutzen Sie einen optimal:

Mit einem Preset beginnen — die meisten Generatoren enthalten Dreiecke, Hexagone, Parallelogramme, Sterne und andere gängige Formen. Von einem Preset zu starten und dann Handles zu ziehen ist schneller als von Grund auf neu zu bauen.
Die Vorschau an echtem Inhalt testen — auf einem Platzhalterbild oder farbigen Div, das Ihrem tatsächlichen Inhalt ähnelt, generieren. Formen sehen auf einfarbigem Hintergrund sehr anders aus als auf einem Foto.
Die Ausgabe auf Desktop- und Mobile-Breiten prüfen — eine Form mit flachen Winkeln kann auf dem Desktop elegant aussehen und auf einem Telefon gedrängt wirken.
Nur das kopieren, was Sie brauchen — ein Generator gibt Ihnen die vollständige clip-path-Eigenschaft. Wenn Sie es in einer Komponente verwenden, die auch filter: drop-shadow() benötigt, beides zusammen einfügen.

clip-path mit anderen CSS-Tools kombinieren

clip-path lebt in echten Projekten selten allein. Häufige Kombinationen:

CSS-Gradienten: Einen Gradientenhintergrund auf ein Polygon beschneiden für geometrische Dekorationsabschnitte. Der Gradient wird zuerst gerendert, dann schneidet die Form ihn.
CSS Flexbox: Flexbox behandelt das Layout um Ihre beschnittenen Elemente herum. clip-path beeinflusst den Dokumentfluss nicht — das Element nimmt immer noch sein ursprüngliches Rechteck im Layout ein.
CSS Box Shadow: Gestalten Sie Ihre Schattenwerte hier und übersetzen Sie dann in die filter: drop-shadow()-Syntax, wenn Sie sie auf beschnittene Elemente anwenden.

Browser-Unterstützung: Das ehrliche Bild

Die grundlegenden clip-path-Formfunktionen — polygon(), circle(), ellipse(), inset() — haben solide Unterstützung in modernen Browsern. Chrome, Firefox, Safari und Edge unterstützen sie alle ohne Präfixe.

Wo noch Probleme auftreten:

Älteres iOS Safari (vor 13.4) benötigte das -webkit--Präfix für grundlegende Formen
Sehr alte Android-WebView-Versionen können Probleme mit komplexen Polygonpfaden haben
SVG-basiertes clip-path: url(#myClip) hat bessere Legacy-Abdeckung für ältere Umgebungen

Fazit

clip-path ist eine jener CSS-Eigenschaften, die sich fast zu mächtig anfühlt, sobald man sich damit auskennt. Diagonale Abschnitte, geometrische Avatare, gekernte Karten — Dinge, die früher Bild-Assets oder SVG-Workarounds erforderten, brauchen jetzt ein paar Zeilen CSS.

Die wichtigsten Punkte:

polygon() ist das vielseitigste — Prozentsätze für responsives Verhalten verwenden
clip-path schneidet box-shadow ab — stattdessen filter: drop-shadow() verwenden
Klick- und Hover-Bereiche folgen der Clip-Grenze
Nur zwischen Formen mit derselben Funktion und Punktanzahl animieren
Im Zweifel einen visuellen Generator verwenden — das Leben ist zu kurz, um Hexagoneckpunkte von Hand zu berechnen