Zum Inhalt

Teile von Elementen ausschneiden mit clip-path

Teaser mit ausgeschnittener Ecke

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.

  1. Die Pseudoelemente können nicht anderweitig verwendet und es gibt nur 2 Elemente.
  2. Die Ausschnitte müssen müssen mittels Rechtecken mit abgerundeten Kanten abgebildet werden können.
  3. 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.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.