CSS: Bilder mit `clip-path` maskieren

Mit der clip-path CSS-Property ist es möglich komplexe Formen als Maske zu generieren, die dann nur einen definierten Teil des Elements anzeigen. Von der Funktion her also vergleichbar mit z.B. Schnittmasken im Adobe Illustrator. Die Maske kann über einen Pfad oder eine externe SVG-Grafik definiert werden.

Anwendung

Ich hatte zum Beispiel einen Fall, bei dem ein Bild in einem Oktagon dargestellt werden soll, ohne das Bild als solches zu bearbeiten. Ohne die clip-pathProperty hätte ich beispielsweise ein PNG oder SVG überlagern können, welches die Ecken abdeckt und nur im Bereich des Oktagons transparent ist. Das funktioniert natürlich nur auf fest definierten, einfarbigen Hintergründen, da man das PNG/SVG auf diese Hintergrundfarbe anpassen muss. Mit clip-path kann man einfach ein Oktagon als Polygonpfad erstellen, welches das Bild entsprechend maskiert. Die Syntax und Nutzung ist recht einfach, so sieht die Property für ein Oktagon beispielsweise folgendermaßen aus:

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

Um die Maskenformen nicht selbst definieren zu müssen gibt es das praktische Tool Clippy: CSS Clip-Path Maker popup: yes, welches vorgefertigte Formen zur Verfügung stellt, aber auch eine Editierfunktion für eigene Formen besitzt.

Mit clip-path kann man maskierte Bilder auch auf Verläufen, anderen Bildern, oder sich wechselnden Hintergründen benutzen. Das Resultat sieht dann zum Beispiel so aus:

(codepen: http://codepen.io/czehnter/pen/ZpmwYW)

Browsersupport

Der Support ist leider, wie so oft, nicht optimal. Folgende Browser werden gar nicht unterstützt:

  • Internet Explorer
  • Edge
  • Opera Mini

Alle anderen Major-Browser unterstützen clip-path seit etlichen Versionen, das Problem ist nur, dass es für dieses Feature quasi kein Fallback oder Workaround gibt, den man in nicht-unterstützten Browsern ordentlich anwenden kann. Außer natürlich das Bild/Element im Ausgangszustand anzuzeigen. Ich hoffe IE bzw. Edge wird da in Kürze nachziehen, da es meiner Meinung nach ein durchaus nützliches und anwendbares Feature ist.