Wie kann ich diese "Ausbuchtung" machen

[Hannes Weninger]

Hallo,

ich hab auf der folgenden Seite ein Feature gesehen, welches ich in so ähnlicher form auch auf meiner Webseite bräuchte.
Ausbuchtung

Hier ist auf der linken Seite ein "weißes" Image mit den 2 Streifen (Schwer zu beschreiben).
Meine Frage wäre, kann ich das mit CSS3 auch machen oder muss ich da ein Image erzeugen.

Ich frage deshalb, da bei mir nicht alle Seiten gleich hoch sind und ich deshalb nich garantieren kann, dass die höhe der Seite nicht kleiner ist als das Image.

Vielen Dank für die Antworten.

lg
Hannes

[Chris_als_Gast]

Hallo,

Hallo,

hierbei handelt es sich um ein Bild, wenn ich richtig verstanden habe, welche Ausbuchtung Du meinst.

BTW: Ich empfehle ein Webmaster-Tool-Plugin für Deinen Browser, wie z.B. Web Developer 1.2.x oder ähnliches. Damit kann st Du solche Dinge leicht selbst herausfinden.

Nun zu Deiner Frage:
Es ist möglich, soetwas mit CSS in der Höhe dynamisch zu gestalten. Schau Dir einmal an, wie das bei Menühintergründen auf Webseiten gemacht wird, die von der Breite her aufgrund ihrer Beschriftungslänge auch nicht immer gleich sind.

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. ;)

VG
Chris

[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'

[Hannes Weninger]

Vielen Dank für Eure Beiträge!
lg