CSS3: Komplexe Beschneidungspfade mit der Eigenschaft Clip-Path

Bisher war es mit CSS nicht möglich, Elemente jenseits rechteckiger Begrenzungen darzustellen. Die mittlerweile etablierte Eigenschaft „border-radius“ erlaubt zwar abgerundete Ecken, die somit auch eine runde Grundform erlauben; komplexere Beschneidungen sind damit aber nicht zu erstellen. Die CSS3-Eigenschaft „clip-path“ bringt jedoch komplexe Beschneidungspfade zur Anwendung, die auch per SVG-Grafik definiert werden können.

Maskierung in CSS nicht neu, aber…

Die Möglichkeit, Elemente per CSS zu beschneiden beziehungsweise zu maskieren, ist nicht neu. Bereits seit CSS 2.1 gibt es die Eigenschaft „clip“, die es erlaubt, ein Element an den Seiten zu beschneiden. Allerdings erlaubt die Eigenschaft nur eine rechteckige Maskierungsform:

img {
  position: absolute;
  clip: rect(10px, 10px, 50px, 50px);
}

Außerdem funktioniert die Eigenschaft nur bei absolut platzierten Elementen. Wesentlich mehr Möglichkeiten hat die CSS3-Eigenschaft „clip-path“. Neben rechteckigen Maskierungen lassen sich auch elliptische, runde und polygonale Formen realisieren:

img {
  clip-path: rectangle(10px, 10px, 50px, 50px, 5px, 5px);
}

Während die ersten vier Werte von „rectangle()“ identisch sind mit den Werten für „rect()“ bei der alten „clip“-Eigenschaft, definieren die letzte beiden optionalen Werte die Radien für abgerundete Ecken – jeweils für den horizontalen und vertikalen Radius. Für einen Kreis erwartet „circle()“ drei Werte – die X- und Y-Koordinaten für den Mittelpunkt sowie einen Radius:

img {
  clip-path: circle(100px, 100px, 50px);
}

Ein Polygon („polygon()“) erlaubt beliebig viele Koordinatenpaare (X- und Y-Koordinaten) zur Definition aufwändiger Formen.

Komplexe Maskierungen mit SVG-Grafiken

Auch deutlich komplexere Maskierungen sind mit „clip-path“ möglich. Dazu werden die Koordinaten nicht direkt in die CSS-Eigenschaft geschrieben, was immer nur die Verwendung einer der vier Grundformen erlaubt, sondern in eine SVG-Grafik ausgelagert. Die SVG-Grafik wird dazu mit Angabe einer ID im HTML-Dokument platziert:

<svg>
  <defs>
    <clipPath id="form">
      <circle cx="100" cy="100" r="50" />
    </clipPath>
  </defs>
</svg>

Anschließend wird der CSS-Eigenschaft „clip-path“ die ID des SVG-Pfades übergeben:

img {
  clip-path: url(#form);
}

Browserunterstützung

Die aktuellen Versionen von Chrome, Safari und Chrome können die „clip-path“-Eigenschaft interpretieren, der aktuelle Internet Explorer nicht. In jedem Fall setzen die Browser derzeit noch die Verwendung des jeweiligen Vendor-Prefixes voraus.