CSS: Sidebar with folded header ribbon

Now I've see various ways to accomplish this effect:

I used to accomplish this with a table, but I've since decided not to use tables like that. What's the best way to do this? Keepin开发者_运维百科g in mind that there's a right border...

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

take your two elements, float them left abutted to each other. set a repeating background of the ribbon without the end in div 1. set a non-repeating background of the ribbon "end" in the other div

using 2 block's? one for the big green and one beneath for the folded corner you could position it so it overlaps everything so it wont get in a way for whatever block you might have beneath that contains text and what not

Here is a pure css solution. I think this could be done more elegantly (using css after and before). Just putting this out there to get you started.

http://jsbin.com/oduju3/edit

Enjoy.