Wie kann ich diese "Ausbuchtung" machen

[Gunnar Bittersmann]

@@Chris_als_Gast:

nuqneH

Tipp: "Ausbuchtungsgrafik" zerlegen in "Bogen" und "Weißem Rechteck". Den "Bogen" fest einbauen und das "Weiße Rechteck" in der Höhe dynamisch erzeugen. Das sollte als Anregung genügen. ;)

Sliding doors war mal eine interessante Technik – solange es eine interessante Technik war.

Seit einiger Zeit gibt es the humble border-radius [css3-background §5], damit lässt sich die obere Wölbung nach außen realisisieren.

Die untere nach Wölbung nach innen noch nicht. Es ist angedacht [css-backgrounds-4 §5.7], aber fraglich.

Möglich wäre aber ein radialer Gradient [css-images §4.2], was aber hässlich aussieht, weil beim Rendern kein Anti-Aliasing eingesetzt wird. (Gradienten sind ja eigentlich – wie der Name schon sagt – nicht für scharfe Kanten gedacht.)

Also doch besser ein Pseudoelement: siehe da!

Qapla'