Wenn es früher darum ging Teile von Elementen auszuschneiden hat man oft zum Pseudo-Element als Lösung gegriffen. Dabei hat man die Pseudoelemente an den ausgeschnittenen Stellen platziert und in der Hintergrundfarbe eingefärbt.
Bei dem oben beschriebenem Vorgehen entstehen jedoch mehrere Probleme.
- Die Pseudoelemente können nicht anderweitig verwendet und es gibt nur 2 Elemente.
- Die Ausschnitte müssen müssen mittels Rechtecken mit abgerundeten Kanten abgebildet werden können.
- Das Element darf keinen Schatten oder sonstige Umrandungen haben.
Die Lösung
Mit clip-path lassen sich nicht nur wie in den meisten Beispielen online Figuren in der Mitte des Elements ausschneiden, sondern auch Formen entlang der Außenkante des Elements.
See the Pen
Teaser Cutout by wesselbaum (@wesselbaum)
on CodePen.
In dem Beispiel sieht man, wie mit etwas calc Berechnungen ein Ausschnitt in der unteren rechten Ecke entstanden ist.
Dabei ist zu beachten, dass der Schatten, der auf dem Element liegt durch ein umschließendes Element kommt.