clip-path

Mit clip-path lassen sich HTML-Elemente auf beliebige Formen begrenzen. Kreise, Ellipsen, Polygone oder komplexe SVG-Pfade eröffnen neue Möglichkeiten für Bilder, Hero-Bereiche, Buttons, Karten und kreative Layouts.

---

Was ist clip-path?

Mit der CSS-Eigenschaft clip-path wird festgelegt, welcher Bereich eines HTML-Elements sichtbar bleibt. Alles ausserhalb der definierten Form wird ausgeblendet. Das Element selbst bleibt an seiner ursprünglichen Position und behält seinen Platz im Seitenlayout.

Je nach Funktion entstehen einfache Formen wie Kreise und Ellipsen oder frei definierte Formen mit Polygonen und SVG-Pfaden. Dadurch lassen sich Bilder, Container und andere Elemente ohne Grafikprogramm direkt mit CSS gestalten.

clip-path oder overflow: hidden?

Mit clip-path lässt sich die sichtbare Fläche eines Elements auf beliebige Formen begrenzen. overflow: hidden blendet dagegen nur Inhalte aus, die den rechteckigen Container verlassen.

• clip-pathBegrenzt die sichtbare Fläche auf Kreise, Polygone, SVG-Pfade und weitere Formen.
• overflow: hiddenSchneidet Inhalte rechteckig am Rand des Containers ab.

/* Beliebige Form */
clip-path: circle(50%);

/* Rechteckiger Ausschnitt */
overflow: hidden;

/* Freie Form */
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);

---

clip-path Funktionen

clip-path stellt fünf Funktionen zum Erzeugen von Formen bereit. Einige erzeugen einfache Grundformen, andere ermöglichen beliebige oder sehr komplexe Formen.

• circle()Kreis
• ellipse()Ellipse
• inset()Rechteck mit optional abgerundeten Ecken
• polygon()Beliebige Vielecke
• path()Komplexe Formen mit SVG-Pfaden

---

1. circle()

Die Funktion circle() begrenzt die sichtbare Fläche eines Elements auf einen Kreis. Grösse und Position des Kreises können frei festgelegt werden.

clip-path: circle(50%);

circle(radius at position)

Werte

• radiusBestimmt die Grösse des Kreises. Erlaubt sind Längenangaben wie px, Prozentwerte (%), closest-side und farthest-side.
• atLegt die Position des Mittelpunkts fest. Ohne at liegt der Mittelpunkt automatisch in der Mitte.
• PositionErlaubt sind Schlüsselwörter wie center, top, right, bottom, left sowie Koordinaten wie 100px 50px oder 30% 70%.

Position des Mittelpunkts

Wird der Mittelpunkt verschoben, bleibt die Form ein Kreis. Sichtbar ist aber nur der Teil des Kreises, der innerhalb des Elements liegt.

clip-path: circle(50% at top left);

Der Mittelpunkt liegt oben links. Deshalb erscheint nur ein Viertelkreis innerhalb des Elements.

clip-path: circle(50% at bottom right);

Der Mittelpunkt liegt unten rechts. Auch hier bleibt nur der Teil des Kreises sichtbar, der sich innerhalb des Elements befindet.

clip-path: circle(50% at 30% 70%);

Mit Koordinaten lässt sich der Mittelpunkt frei innerhalb des Elements positionieren.

circle() oder border-radius?

Für einen einfachen runden Avatar reicht oft border-radius: 50%. circle() wird interessant, wenn der Kreis verschoben, animiert oder später mit anderen clip-path-Formen kombiniert werden soll.

border-radius: 50%;
clip-path: circle(50% at top left);

---

2. ellipse()

Die Funktion ellipse() begrenzt die sichtbare Fläche eines Elements auf eine Ellipse. Im Gegensatz zu circle() können Breite und Höhe unabhängig voneinander festgelegt werden.

clip-path: ellipse(50% 30%);

ellipse(radiusX radiusY at position)

Werte

• radiusXBestimmt den horizontalen Radius der Ellipse. Erlaubt sind Längenangaben wie px, Prozentwerte (%), closest-side und farthest-side.
• radiusYBestimmt den vertikalen Radius der Ellipse. Es gelten die gleichen Werte wie für radiusX.
• atLegt die Position des Mittelpunkts fest. Ohne at liegt der Mittelpunkt automatisch in der Mitte.
• PositionErlaubt sind Schlüsselwörter wie center, top, right, bottom, left sowie Koordinaten wie 100px 50px oder 30% 70%.

---

3. inset()

Die Funktion inset() begrenzt die sichtbare Fläche auf ein Rechteck. Die Abstände zu den vier Seiten können unabhängig voneinander festgelegt werden. Optional lassen sich die Ecken mit round abrunden.

clip-path: inset(20px);

clip-path: inset(10% round 20px);

Werte

• top right bottom leftBestimmen die Abstände zu den vier Seiten. Erlaubt sind Längenangaben wie px und Prozentwerte (%).
• roundOptionaler Parameter zum Abrunden der Ecken.
• border-radiusLegt den Radius der abgerundeten Ecken fest. Es gelten die gleichen Werte wie bei border-radius.

Abstände festlegen

Die Reihenfolge der Werte entspricht der von margin und padding. Je nach Anzahl der Werte gelten unterschiedliche Regeln.

clip-path: inset(20px);

Ein Wert gilt für alle vier Seiten.

clip-path: inset(20px 40px);

Der erste Wert gilt für oben und unten, der zweite für links und rechts.

clip-path: inset(20px 40px 60px);

Der erste Wert gilt für oben, der zweite für links und rechts, der dritte für unten.

clip-path: inset(20px 40px 60px 80px);

Vier Werte stehen für oben, rechts, unten und links.

Abgerundete Ecken

Mit round lassen sich die Ecken des ausgeschnittenen Bereichs abrunden.

clip-path: inset(10% round 20px);

Der Radius der Ecken wird wie bei border-radius angegeben und kann ebenfalls mit mehreren Werten definiert werden.

---

4. polygon()

Die Funktion polygon() erstellt beliebige Vielecke aus Koordinatenpaaren – vom einfachen Dreieck bis zu komplexen Formen.

Werte

• x yJeder Punkt besteht aus einer x- und einer y-Koordinate.
• PunkteJedes Wertepaar definiert einen Eckpunkt des Polygons.
• ReihenfolgeDie Punkte werden in der angegebenen Reihenfolge miteinander verbunden.
• WerteKoordinaten können mit Längenangaben oder Prozentwerten angegeben werden.

Dreieck

clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
/* Spitze oben, Basis unten */

Koordinaten in polygon() funktionieren so:

     0%          50%         100%
      ↓           ↓           ↓
0%  → ┌───────────┼───────────┐
      │                       │
50% → ├───────────●───────────┤
      │      (50%, 50%)       │
100%→ └───────────┴───────────┘

polygon(x y, x y, x y, ...)

/* Beispiel: Dreieck */
polygon(
    50% 0%,    /* Punkt 1: oben mitte */
    0% 100%,   /* Punkt 2: unten links */
    100% 100%  /* Punkt 3: unten rechts */
)

Trapez

clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);

Parallelogramm

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

Raute (Rhombus)

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

Pentagon (Fünfeck)

clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);

Hexagon (Sechseck)

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

Stern

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

Pfeil

clip-path: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%);

Sprechblase

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

Chevron

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

---

5. path()

Die Funktion path() verwendet SVG-Pfade zum Ausschneiden beliebiger Formen. Im Gegensatz zu polygon() sind damit auch Bézierkurven, Bögen und komplexe Formen möglich.

clip-path: path('M 0,100 Q 50,0 100,100 Q 150,200 200,100 T 400,100 L 400,200 L 0,200 Z');

SVG-Path-Syntax

• MLegt den Startpunkt des Pfades fest (Move to).
• LZeichnet eine gerade Linie zum nächsten Punkt (Line to).
• QErstellt eine quadratische Bézierkurve.
• CErstellt eine kubische Bézierkurve.
• AErstellt einen elliptischen Bogen.
• ZSchliesst den Pfad und verbindet den letzten mit dem ersten Punkt.

---

Bilder mit clip-path

Hexagon-Bild

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

SVG oder Image

Das Beispiel oben nutzen eine SVG-Zeichnung als Hintergrundbild. Die gleiche Technik funktioniert genauso mit einem echten Foto. clip-path schneidet dabei den sichtbaren Bereich des Bildes auf die gewünschte Form zu.

<img src="figuren.jpg" alt="Figuren">

img {
    width: 300px;
    height: 300px;
    object-fit: cover;
    clip-path: circle(45%);
}

---

Animationen

clip-path lässt sich animieren. Dadurch entstehen weiche Übergänge zwischen verschiedenen Formen.

Kreis wächst beim Hover

.box {
    clip-path: circle(30%);
    transition: clip-path 0.5s ease-in-out;
}

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

Formwechsel

.box {
    /* Raute */
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    transition: clip-path 0.5s ease-in-out;
}

.box:hover {
    /* Pentagon */
    clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
}

Wichtig: Damit der Übergang funktioniert, müssen beide polygon()-Formen die gleiche Anzahl Punkte besitzen.

---

Praktische Beispiele

1. Hero Section mit diagonalem Schnitt

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

---

2. Wellenförmiger Header

.hero {
    clip-path: ellipse(100% 100% at 50% 0%);
}

---

3. Card mit abgeschrägtem Bild

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

---

4. Clipped Buttons

/* Pfeil */
.btn-arrow {
    clip-path: polygon(0% 0%, 90% 0%, 100% 50%, 90% 100%, 0% 100%);
}

/* Hexagon */
.btn-hexagon {
    clip-path: polygon(10% 25%, 10% 75%, 50% 100%, 90% 75%, 90% 25%, 50% 0%);
}

---

5. Reveal-Effekt

Hover über das Bild!

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: white;
    clip-path: circle(0% at 50% 50%);
    transition: clip-path 0.8s ease-in-out;
}

.container:hover .overlay {
    clip-path: circle(150% at 50% 50%);
}

---

6. Diagonales Split-Layout

.left {
    clip-path: polygon(0 0, 100% 0, 70% 100%, 0 100%);
}

.right {
    clip-path: polygon(30% 0, 100% 0, 100% 100%, 0% 100%);
    margin-left: -100px; /* Überlappung */
}

---

7. Hover Gallery

.gallery-item {
    clip-path: circle(40%);
    transition: clip-path 0.4s ease-in-out;
}

.gallery-item:hover {
    clip-path: circle(50%);
}

---

Fallback mit @supports

Mit @supports lassen sich CSS-Eigenschaften nur dann anwenden, wenn der Browser sie unterstützt.

.box {
    border-radius: 50%; /* Fallback */
}

@supports (clip-path: circle(50%)) {
    .box {
        border-radius: 0;
        clip-path: circle(50%);
    }
}

---

Tools zum Erstellen

Diese Tools helfen beim Erstellen von clip-path-Formen und erzeugen den passenden CSS-Code.

• Clippy – Visueller Editor für circle(), ellipse(), inset() und polygon().
• Clip-Path Generator – Erstellt clip-path-Code mit Live-Vorschau.
• MDN clip-path – Dokumentation, Referenz und weitere Beispiele.

---

Häufige Fallstricke

1. Unterschiedliche Anzahl von Punkten

Ein polygon() kann nur sauber animiert werden, wenn Startform und Zielform gleich viele Punkte besitzen.

2. clip-path auf Inline-Elementen

clip-path funktioniert nicht auf normalen Inline-Elementen. Verwende stattdessen display: block oder display: inline-block.

3. Vergessene Einheiten

Längenangaben benötigen eine Einheit wie px oder %. Werte ohne Einheit sind ungültig.

4. Border und Box-Shadow

clip-path schneidet auch Border und Box-Shadow ab. Falls sie sichtbar bleiben sollen, hilft oft ein zusätzliches Wrapper-Element.

---

clip-path Cheat Sheet

Funktionen

• circle(radius at position)
• ellipse(radiusX radiusY at position)
• inset(top right bottom left round radius)
• polygon(x y, x y, ...)
• path('...')

Merken

• atLegt bei circle() und ellipse() die Position des Mittelpunkts fest.
• roundRundet bei inset() die Ecken ab.
• KoordinatenpaareBei polygon() besteht jeder Punkt aus einem x- und einem y-Wert.
• AnimationenBei animierten polygon()-Formen müssen Start- und Zielform gleich viele Punkte besitzen.

---

Kurz gesagt

• clip-path schneidet Elemente in beliebige Formen
• circle() und ellipse() für runde Formen
• polygon() ist am flexibelsten – beliebige Vielecke
• inset() für Rechtecke mit abgerundeten Ecken
• path() für komplexe SVG-Pfade
• polygon() verwendet x-/y-Koordinatenpaare
• Animationen funktionieren, wenn beide Shapes gleich viele Punkte haben
• Border und Box-Shadow werden mit abgeschnitten
• Funktioniert auf Block- und Inline-Block-Elementen

---

background-clip – Hintergründe und Text statt ganzer Elemente zuschneiden.

---