25.7.2022
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.
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.