CSS clip-path – Kreis, Raute, Ellipse

CSS Freistellpfad

Ein Clip Path (Freistellpfad oder Beschneidungspfad) ist ein geschlossener Vektor, der eine Form (z.B. Stern, Kreis oder Dreieck) bildet. Alles innerhalb der Form ist sichtbar, alles außerhalb der Form ist unsichtbar. Den Freistell- oder Beschneidungspfad kennen wir aus Photoshop, Illustrationsprogrammen und Satzprogrammen.

Freistellen / Beschneiden

So werden Bilder nicht-destruktiv ohne Hintergrund gezeigt. D.h., das Bild muss nicht im Bildbearbeitungsprogramm bearbeitet und als WebP, PNG oder GIF mit Alpha-Kanal gespeichert werden, sondern bleibt vollständig erhalten.

CSS clip-path bringt einfache Grundformen wie Circle, Ellipse oder Rechteck bereits mit. Beliebig komplexe Pfade maskieren das Bild durch eine url-Referenz auf ein SVG-clipPath-Element.

Die einfachste Variante ist clip-path: inset(top right bottom left) – ein Rechteck. Mit top, right, bottom und left gibt inset den Abstand vom Rand des Bildes an und das beschnittene Objekt muss nicht mehr absolut positioniert sein (was bei CSS2.1 clip noch der Fall ist).

CSS clip-path alt — Alte Version: CSS clip

CSS clip-path neu — Neue Variante: CSS clip-path

.clip-path {
                      +-- top + bottom
                      |
	clip-path: inset(20% 20%);
	                      |
	       right + left --+
}

CSS clip-path mit SVG clipPath

Komplexe Formen wie Sonne, Sterne und Mond oder die Kontur eines Motivs entstehen mit der URL (Adresse) eines Pfades.

CSS clip-path wird nicht für HTML-Elemente, sondern auch als clipPath in SVG verwendet. Was innerhalb SVG clipPath steht, wird nicht direkt gerendert, sondern als Maske über ein anderes Element gelegt. style="clip-path: url(#id)" legt die Maske über ein sichtbares Objekt – sowohl in einer SVG-Grafik als auch über ein HTML-Element.

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

`.garnrolle { clip-path: url(#garnrolle); }`

clip-path erzeugt eine harte Kontur: Es gibt nur »Zeigen« oder «Nicht-Zeigen«, aber keine weichen Übergänge wie bei einem Alpha-Kanal. Weiche Konturen werden mit CSS mask-image erzeugt.

CSS für clip-path

<style>
.garnrolle {
   clip-path: url(##garnrolle);
}

Markup für clip-path

<img class="clipPath" src="twocats" … >
…

<svg width="0" height="0" viewBox="0 0 92 69.5">
<clipPath id="garnrolle" clipPathUnits="objectBoundingBox" transform="scale(0.010869 0.014388)">
  <path d="m26.94 5.1103c-2.7314 0-4.9304 1.95-4.9304 …"/>
</clipPath>
</svg>

clip-path: url(#id) setzt den SVG-clipPath als CSS-Eigenschaft in ein HTML-Element.

Das Attribut clipPathUnits="objectBoundingBox" im SVG passt den clipPath an das beschnittene Objekt an. Für objectBoundingBox müssen die Werte des Pfads zwischen 0 und 1 liegen. Darum ist der Pfad in diesem Beispiel transformiert.

clip-path mit SVG-Vektormaske

Die srcset-Varianten für kleine und große Viewports kommen mit einem clip-path aus und die URL-Pfade dürfen beliebig komplex werden. Bei einem derart aufwändigem Pfad wird es aber meist sinnvoller sein, gleich einen Freisteller aus der Bildbearbeitung einzusetzen, denn das WebP-Format unterstützt Transparenz und liefert deutlich kleinere Dateigrößen als PNG24.

clip-path Optionen

Für clip-path gibt es neben der URL-Variante weitere Optionen für einfache Formen.

url(#pathid): ein SVG-Pad aus Inline-SVG. Theoretisch kann der clip-path auch in einer externen SVG-Datei liegen, aber diese Option wird bislang von keinem Browser unterstützt.
inset (top right bottom left round topleft topright bottomright bottomleft): ähnlich wie CSS clip:rect, aber mit einer einfacheren Notation der Abstände und der zusätzlichen Option auf abgerundete Ecken.
inset-rectangle
rectangle
circle (radius at x y): ein Kreis mit Radius und Zentrum bei x,y
ellipse (radiusX radiusY at x y): eine Ellipse mit Radius und Zentrum bei x,y
polygon (x1 y1, x2 y2, … ): ein Polygon (Vieleck) mit beliebig vielen Punkten x,y
none: Zurücksetzen und Original zeigen

Browser-Support für clip-path

clip-path maskiert nicht nur Bilder, sondern alle Arten von HTML-Blöcken. Allerdings würde auch ein Text in einem maskierten Block beschnitten, der Text wird nicht an die Form angepasst. Um Text entlang einer Form auszurichten, gibt es CSS shape.

Soweit wird der clip-path von allen modernen Browsern unterstützt – außer natürlich von den üblichen Verdächtigen: IE in allen Versionen.