CSS clip-path Eigenschaft

Die clip-path-Eigenschaft definiert einen Clipping-Bereich: den Teil eines Elements, der sichtbar bleibt. Alles außerhalb dieses Bereichs wird ausgeblendet — der versteckte Bereich belegt jedoch weiterhin Platz im Layout, er wird lediglich nicht gezeichnet. Damit lassen sich Elemente in nicht-rechteckige Formen (Kreise, Sechsecke, Pfeile, Sterne) zuschneiden, ohne die zugrundeliegenden Bilder oder das Markup zu bearbeiten.

Im Gegensatz zum Zuschneiden eines Rasterbilds in einem Editor ist ein clip-path rein visuell und reversibel: Das vollständige Element befindet sich weiterhin im DOM, ist nur innerhalb des Clips anklickbar und kann zwischen Formen animiert werden.

Diese Eigenschaft akzeptiert vier Arten von Werten:

<clip-source> — eine url(), die auf ein SVG-<clipPath>-Element verweist, für vollständig benutzerdefinierte Pfade.
<basic-shape> — eine CSS-Formfunktion: circle(), ellipse(), inset() oder polygon().
<geometry-box> — die Referenzbox, gegen die die Form gemessen wird (border-box, padding-box, content-box oder margin-box).
none — kein Clipping; das gesamte Element wird angezeigt (der Standardwert).

clip-path löst die veraltete, nur auf Rechtecke beschränkte clip-Eigenschaft ab. Bevorzuge clip-path in allem neuen Code: clip funktionierte nur bei absolut positionierten Elementen und konnte keine nicht-rechteckigen Formen erzeugen.

Wann clip-path einsetzen

Avatare oder Miniaturbilder als Kreise oder Sechsecke anzeigen, während ein quadratisches Quellbild beibehalten wird.
Schräge oder diagonale Abschnittstrenner erstellen, ohne zusätzliche Hintergrundbilder.
Inhalte mit einer animierten Form einblenden oder ausblenden (da <basic-shape>-Werte animierbar sind).
Dekorative Aussparungen, Badges und Pfeile aus einem einzigen Element bauen.

Wenn Text um eine Form fließen soll, anstatt das Element zu beschneiden, verwende stattdessen shape-outside.

Anfangswert	none
Gilt für	Alle Elemente.
Vererbt	Nein
Animierbar	Ja, wenn für `<basic-shape>` angegeben.
Version	CSS Masking Module Level 1
DOM-Syntax	object.style.clipPath = "none";

Syntax

clip-path: <clip-source> | <basic-shape> | <geometry-box> | none | initial | inherit | unset;

Die basic-shape-Funktionen

Diese vier Funktionen decken nahezu jeden Clipping-Bedarf ab. Koordinaten können jede CSS-Länge oder einen Prozentwert verwenden; Prozentwerte beziehen sich auf die Referenzbox.

circle(radius at cx cy) — ein Kreis. Beispiel: circle(50% at 50% 50%) zeichnet den größten zentrierten Kreis auf dem Element.
ellipse(rx ry at cx cy) — eine Ellipse mit separaten horizontalen und vertikalen Radien.
inset(top right bottom left round <radius>) — ein von jedem Rand eingerücktes Rechteck, mit einem optionalen round-Schlüsselwort für abgerundete Ecken.
polygon(x1 y1, x2 y2, …) — ein beliebiges Polygon, das durch eine Liste von Eckpunkten im Uhrzeigersinn definiert wird. polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%) erzeugt eine Raute.

Für Formen, die sich mit diesen Funktionen nicht ausdrücken lassen, kann ein SVG-<clipPath> referenziert werden: clip-path: url(#myClip).

Beispiel der clip-path-Eigenschaft:

Beispiel der CSS clip-path-Eigenschaft mit basic-shape-Wert

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        background-color: #eee;
      }
      .container {
        display: grid;
        grid-template-columns: 200px 200px 200px;
        grid-template-rows: 200px 200px 200px;
        grid-gap: 20px;
        justify-content: center;
      }
      .container div {
        background-image: url("/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg");
        background-position: center;
        background-size: cover;
        color: #000;
        font-size: 18px;
        font-family: sans-serif;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .example {
        clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
      }
    </style>
  </head>
  <body>
    <h1>Clip-path property example</h1>
    <div class="container">
      <div class="example">polygon</div>
    </div>
  </body>
</html>

Probier es selbst »

Ergebnis

Das quadratische Bild wird zu einer Raute zugeschnitten — seine Ecken werden ausgeblendet, während die Layout-Box 200×200 bleibt.

Beispiel der clip-path-Eigenschaft mit allen Werten:

Beispiel der CSS clip-path-Eigenschaft mit globalen und basic-shape-Werten

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        background-color: #eee;
      }
      .container {
        display: grid;
        grid-template-columns: 200px 200px 200px;
        grid-template-rows: 200px 200px 200px;
        grid-gap: 20px;
        justify-content: center;
      }
      .container > div {
        background-image: url(/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg);
        background-position: center;
        background-size: cover;
        color: #000;
        font-size: 18px;
        font-family: sans-serif;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .box1 {
        clip-path: none;
      }
      .box2 {
        clip-path: inset(25% 0 25% 0 round 0 25% 0 25%);
        /* values are from-top, from-right, from-bottom, from-left, and optional round keyword for border-radius */
      }
      .box3 {
        clip-path: circle(50% at 50% 50%);
      }
      .box4 {
        clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
      }
      .box5 {
        clip-path: ellipse(90px 50px at 100px 100px);
      }
      .box6 {
        clip-path: inherit;
      }
      .box7 {
        clip-path: initial;
      }
      .box8 {
        clip-path: unset;
      }
    </style>
  </head>
  <body>
    <h2>Clip-path property example</h2>
    <div class="container">
      <div class="box1">none</div>
      <div class="box2">inset</div>
      <div class="box3">circle</div>
      <div class="box4">polygon</div>
      <div class="box5">ellipse</div>
      <div class="box6">inherit</div>
      <div class="box7">initial</div>
      <div class="box8">unset</div>
    </div>
  </body>
</html>

Probier es selbst »

clip-path animieren

Wenn sowohl der Start- als auch der Endzustand dieselbe <basic-shape>-Funktion mit derselben Anzahl von Punkten verwenden, können Browser flüssig zwischen ihnen interpolieren. Damit sind Form-Enthüllungen und Morphs mit einem transition oder einer animation möglich:

.reveal {
  clip-path: circle(0% at 50% 50%);
  transition: clip-path 0.4s ease;
}
.reveal:hover {
  clip-path: circle(75% at 50% 50%);
}

Ein polygon() lässt sich nur zu einem anderen polygon() mit derselben Anzahl von Eckpunkten animieren; die Punktanzahl muss daher auf beiden Seiten gleich sein.

Browser-Unterstützung und Tipps

clip-path mit <basic-shape>-Werten wird in allen modernen Browsern unterstützt. Ältere Versionen benötigten das -webkit--Präfix; heute reicht eine Deklaration ohne Präfix für Evergreen-Browser.
Der versteckte Bereich wird nur visuell entfernt — er beeinflusst das Layout weiterhin und ist nicht anklickbar, sodass der Rest der Seite unberührt bleibt.
Ein Clip kann Outlines, Box-Schatten und Fokusringe ausblenden, die außerhalb der Form liegen; überprüfe, ob der Tastaturfokus weiterhin sichtbar bleibt.

Werte

Wert	Beschreibung
`<clip-source>`	Die `<url>`, die auf ein SVG-`<clipPath>`-Element verweist.
`<basic-shape>`	Eine grundlegende Formfunktion wie `circle()`, `ellipse()`, `inset()` oder `polygon()`. Kann mit einem `<geometry-box>` durch einen Schrägstrich (`/`) kombiniert werden.
`<geometry-box>`	Definiert die Referenzbox für die grundlegende Form (z. B. `border-box`, `padding-box`, `content-box`, `margin-box`).
none	Es wird kein Clipping-Pfad erstellt.

Hinweis: initial, inherit und unset sind globale CSS-Werte und können mit jeder Eigenschaft verwendet werden.

Übungen

Übung

Was bewirkt die CSS clip-path-Eigenschaft?

Sie definiert einen Clipping-Bereich, der auf jedes HTML- oder SVG-Element angewendet werden kann, um dessen sichtbaren Teil zu steuern.Sie fügt einem Element eine Hintergrundfarbe hinzu.Sie passt die Textgröße innerhalb eines Elements an.Sie steuert die Form des Clipping-Bereichs, der festlegt, welcher Teil eines Elements angezeigt werden soll.Sie passt den Abstand um ein Element an.