制作这个容器的最具语义的方法

Question

我想使用div和边框半径制作以下形状,对于旧浏览器,可以回退到方角.请不要图像.

我在制作标题旁边的底角时遇到了一些麻烦(用红框突出显示).我不想要很多不必要的div,它必须尽可能简单和语义. alt text http://img715.imageshack.us/img715/4214/bradiuswut.gif

<div class="container">
   <div class="header">Title</div>
   <div class="body">Content</div>
</div>

.container{width: 660px; background: #fff;}
.container .header{float: left; width: 110px; background: #333; border-radius: 5px 5px 0 0;}
.container .body{clear: left; width: 660px; background: #333; border-radius: 0 0 5px 5px;}

有任何想法吗？

编辑1:

我是这样做的:http://jsfiddle.net/a93Rb/16/

<div class="container">
    <div class="header"></div>
    <div class="headerspacer">
       <div class="headercorner"></div>
    </div>
    <div class="body"></div>
</div>

.container{width: 660px; background: #fff;}
.container .header{float: left; width: 110px; height: 30px; background: #333; border-radius: 10px 10px 0 0;}  
.container .headerspacer{float: left; position: relative; width: 550px; height: 30px; background: #333;} 
    .container .headerspacer .headercorner{ position: absolute; width: 550px; height: 30px; background: #fff; border-radius: 0 0 0 10px;} 
.container .body{clear: left; width: 660px; height: 100px; background: #333; border-radius: 0 0 10px 10px;}

编辑2:

我将使用这种方法:http://jsfiddle.net/a93Rb/13/

我还发现了一种使用图像的方法,如果浏览器不支持圆角,则不会出现该图像.它更加语义化,使用border-radius的重点是否定不必要的标记.我想我会实际使用这种方法,但我不会接受它作为答案,因为我说我不想要图像.

<div class="container">
    <div class="header"></div>
    <div class="body"></div>
</div> 

.container{width: 660px; background: #fff;}
.container .header{float: left; width: 110px; height: 30px; background: #333; border-radius: 10px 10px 0 0;}                                  
.container .header:after{content: url(http://img24.imageshack.us/img24/1112/corner0.gif); display: block; margin: 20px 0 0 110px;}
.container .body{clear: left; width: 660px; height: 100px; background: #333; border-radius: 0 0 10px 10px;}

Answer 1

我的想法是白色圆形 div，左下角下有深色背景。（我自己无法让它工作，所以很高兴看到结果:)）