Clip-Path

clip-path ist eine CSS-Eigenschaft, die es ermöglicht, einen Bereich eines HTML-Elements zu definieren, der sichtbar bleiben soll. Alles außerhalb dieses Pfades wird abgeschnitten (geclippt) und ist nicht mehr sichtbar. Diese Technik ermöglicht die Erstellung komplexer, nicht-rechteckiger Formen auf Webseiten.

Funktionsweise

clip-path erstellt eine Begrenzungsmaske für ein Element. Sie können sich das vorstellen wie eine Schablone, durch die nur bestimmte Teile des Elements durchscheinen.

Syntax

clip-path: <clip-source> | [ <basic-shape> || <geometry-box> ] | none

clip-path: <clip-source> | [ <basic-shape> || <geometry-box> ] | none

Verschiedene Arten von Clip-Pfaden

Grundformen (basic-shape)

inset() – Rechteckige Ausschnitte

.element {
  clip-path: inset(10px 20px 30px 40px); /* top, right, bottom, left */
}

.element {
  clip-path: inset(10px 20px 30px 40px); /* top, right, bottom, left */
}

Beispiel:

.box {
  width: 200px;
  height: 200px;
  background: blue;
  clip-path: inset(20px 30px 40px 50px);
}

.box {
  width: 200px;
  height: 200px;
  background: blue;
  clip-path: inset(20px 30px 40px 50px);
}

Dies erzeugt ein sichtbares Rechteck, das 20px vom oberen Rand, 30px vom rechten, 40px vom unteren und 50px vom linken Rand des Originalelements entfernt ist.

circle() – Kreisförmige Ausschnitte

.element {
  clip-path: circle(50% at 50% 50%); /* Radius at x-position y-position */
}

.element {
  clip-path: circle(50% at 50% 50%); /* Radius at x-position y-position */
}

Beispiel:

.avatar {
  width: 150px;
  height: 150px;
  background: url('portrait.jpg');
  clip-path: circle(50% at center);
}

.avatar {
  width: 150px;
  height: 150px;
  background: url('portrait.jpg');
  clip-path: circle(50% at center);
}

Dies erzeugt einen perfekten Kreis in der Mitte des Bildes.

ellipse() – Elliptische Ausschnitte

.element {
  clip-path: ellipse(25% 40% at 50% 50%); /* rx ry at x-position y-position */
}

.element {
  clip-path: ellipse(25% 40% at 50% 50%); /* rx ry at x-position y-position */
}

Beispiel:

.oval-image {
  clip-path: ellipse(50% 30% at 50% 50%);
}

.oval-image {
  clip-path: ellipse(50% 30% at 50% 50%);
}

Dies erzeugt eine horizontale Ellipse.

polygon() – Beliebige Polygone

.element {
  clip-path: polygon(x1 y1, x2 y2, x3 y3, ...);
}

.element {
  clip-path: polygon(x1 y1, x2 y2, x3 y3, ...);
}

Beispiel (Dreieck):

.element {
  clip-path: polygon(x1 y1, x2 y2, x3 y3, ...);
}

.element {
  clip-path: polygon(x1 y1, x2 y2, x3 y3, ...);
}

Beispiel (Stern):

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

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

Referenzierung von SVG-Clip-Pfaden

Sie können auch SVG-Definitionen für komplexere Formen verwenden:

<svg width="0" height="0">
  <defs>
    <clipPath id="custom-shape" clipPathUnits="objectBoundingBox">
      <path d="M0.5,0 C0.5,0,0,0.7,0,0.3 C0,0.3,0.5,1,0.5,1 C0.5,1,1,0.3,1,0.3 C1,0.3,0.5,0,0.5,0 Z"/>
    </clipPath>
  </defs>
</svg>

<div class="element"></div>

<svg width="0" height="0">
  <defs>
    <clipPath id="custom-shape" clipPathUnits="objectBoundingBox">
      <path d="M0.5,0 C0.5,0,0,0.7,0,0.3 C0,0.3,0.5,1,0.5,1 C0.5,1,1,0.3,1,0.3 C1,0.3,0.5,0,0.5,0 Z"/>
    </clipPath>
  </defs>
</svg>

<div class="element"></div>

.element {
  clip-path: url(#custom-shape);
}

.element {
  clip-path: url(#custom-shape);
}

Animationsmöglichkeiten

Clip-Pfade können animiert werden, was interessante Effekte ermöglicht:

@keyframes pulse {
  0% { clip-path: circle(30% at 50% 50%); }
  50% { clip-path: circle(50% at 50% 50%); }
  100% { clip-path: circle(30% at 50% 50%); }
}

.animated-element {
  animation: pulse 3s infinite;
}

@keyframes pulse {
  0% { clip-path: circle(30% at 50% 50%); }
  50% { clip-path: circle(50% at 50% 50%); }
  100% { clip-path: circle(30% at 50% 50%); }
}

.animated-element {
  animation: pulse 3s infinite;
}

Praxisbeispiele

Bild in ungewöhnlicher Form anzeigen

.photo {
  width: 300px;
  height: 300px;
  background-image: url('photo.jpg');
  background-size: cover;
  clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
}

.photo {
  width: 300px;
  height: 300px;
  background-image: url('photo.jpg');
  background-size: cover;
  clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
}

Sprechblasen-Effekt

.speech-bubble {
  background: #fff;
  padding: 20px;
  border-radius: 10px;
  position: relative;
  clip-path: polygon(
    0% 0%,
    100% 0%,
    100% 75%,
    75% 75%,
    75% 100%,
    50% 75%,
    0% 75%
  );
}

.speech-bubble {
  background: #fff;
  padding: 20px;
  border-radius: 10px;
  position: relative;
  clip-path: polygon(
    0% 0%,
    100% 0%,
    100% 75%,
    75% 75%,
    75% 100%,
    50% 75%,
    0% 75%
  );
}

Responsive Diagonale Trennung

.split-section {
  height: 300px;
  background: linear-gradient(to right, red, blue);
  clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%);
}

.split-section {
  height: 300px;
  background: linear-gradient(to right, red, blue);
  clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%);
}

Browser-Unterstützung und Fallbacks

Die meisten modernen Browser unterstützen clip-path gut, aber es ist ratsam, Fallbacks für ältere Browser bereitzustellen:

.element {
  /* Fallback für nicht unterstützende Browser */
  border-radius: 50%;
  
  @supports (clip-path: circle(50%)) {
    border-radius: 0;
    clip-path: circle(50%);
  }
}

.element {
  /* Fallback für nicht unterstützende Browser */
  border-radius: 50%;
  
  @supports (clip-path: circle(50%)) {
    border-radius: 0;
    clip-path: circle(50%);
  }
}

Performance-Überlegungen

• Einfache Formen (circle, ellipse, inset) sind performanter als komplexe polygon-Formen
• Animierte Clip-Pfade können rechenintensiv sein – sparsam verwenden
• Für komplexe Formen sind SVG-Clip-Pfade oft effizienter als CSS-Polygone

Unterschied zu mask

Während clip-path eine harte Begrenzung erstellt, ermöglicht mask Transparenzstufen und weichere Übergänge. clip-path ist jedoch besser unterstützt und performanter für einfache Formen.

Starkes Werkzeug

CSS clip-path ist ein starkes Werkzeug zur Erstellung visuell ansprechender, nicht-rechteckiger Designs ohne zusätzliche Grafiken oder komplexes Markup. Es ermöglicht kreative Layouts und visuelle Effekte, die früher nur mit Bildern oder komplexen SVG-Techniken möglich waren.