nicht angemeldet
Es ist eine Leiste, die am rechten Ende durch eine runde Ecke abgeschlossen wird. Ich denke, durch zwei nebeneienander liegenende DIVs wird das am intelligentesten gelöst.
Nein, schon alleine, weil ein <div> dort einzubauen, wo ein <img> hin sollte, nicht so ganz im Sinne des Erfinders ist.
Davon abgesehen lässt sich das auch einfacher lösen: Hintergrundbilder lassen sich positionieren. Du benötigst also lediglich ein entsprechend breites Bild, das am rechten Ende die runde Ecke hat. Dieses bindest Du dann mit
background:url(balken.png) no-repeat right;
ein. Du benötigst keine zwei HTML-Elemente. right sorgt dafür, dass das rechte Ende der Grafik, also die runde Ecke, auch am rechten Ende des betreffenden Elements liegt.
Für Grafiken mit wenigen Farben, wie Du sie hast, eignet sich PNG übrigens besser als JPG; PNG verliert keine Pixel, komprimiert dabei stärker und kann dank Alphakanal besser in den Hintergrund übergehen.