/CSS Hintergrundgrafik mit abgerundeten Ecken

[Fabian St.]

Hi!

Ich habe im Moment das Problem, dass ich eine Hintergrundgrafik in Form eines Rechtecks habe, dass am linken Ende gerundete gerundete Ecken aufweist. Da der Container, in dem sich die Grafik befindet, verschiedenen groß sein kann, hat die Grafik insgesamt eine Breite von 1500px und wird eben bei Bedarf einfach abgeschnitten. Das Problem dabei ist natürlich, dass ich dann eben rechts keine abgerundete Ecken habe.

Aus diesem Grund kam mir dann die Idee, einfach ein div im im relativ positionierten Container, mit right:0; und top:0; absolut zu positionieren und dem dann eine Hintergrundgrafik zuzuweisen. Diese Hintergrundgrafik ist dann eine einfach ein abgerundeter Rahmen in der Höhe der Grafik mit einer offenen linken Seite. Auf diese Weise hat dann auch das Ende der ersten Hintergrundgrafik abgerundete Ecken.

Skizze zum besseren Verständnis:
  _____________________________________
/
|
| Hintergrundgrafik 1
\_____________________________________

__
  \   |
  | Hintergrundgrafik 2
__/

Mir erscheint jedoch diese Art und Weise das zu realisieren ziemlich umständlich. Hätte jemand eine Idee, wie man dies besser machen könnte?

Grüße,
Fabian St.