CSS：带有折叠标题功能区的侧边栏

Question

现在我已经看到了实现这种效果的各种方法：

我曾经用表来完成这个，但我决定不使用那样的表。最好的方法是什么？请记住，有一个正确的边界......

Answer 1

使用2块？ 一个用于大绿色，一个用于折叠角落 你可以定位它所以它重叠一切所以它不会妨碍任何块 你可能在其下面包含文本而不是

Answer 2

<style>
.left{
 float:left;
}
.ribbonTitle{
 background:transparent url(/images/solid.png) repeat-x;
 height:20px;
 width:auto;
}
.ribbonEnd{
 background:transparent url(/images/end.png) no-repeat;
 height:20px;
 width:10px;
}
.clear{
 clear:both;
}
</style>
<div class='left ribbonTitle'>Title</div>
<div class='left ribbonEnd'>&nbsp;</div>
<br class='clear'/>

拿走你的两个元素，将它们左右浮动。设置功能区的重复背景而不使用div 1中的结尾。 在另一个div

中设置功能区“end”的非重复背景

Answer 3

这是一个纯粹的CSS解决方案。我认为这可以更优雅地完成（使用css之前和之后）。只是把它放在那里让你开始。

http://jsbin.com/oduju3/edit

享受。