带有扩展边栏的CSS3的多边框

Question

我希望实现一个带有背景颜色的侧边栏元素，该背景颜色沿着页面继续显示内容。我已设法做到这一点，但我还想添加一个位于侧边栏旁边的“线”或边框。

如果你看这个小提琴，

http://jsfiddle.net/MattStrange/BrM7R/

<div id="container">
<div id="content">This is some content</div>
<div id="sidebar">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lacinia tincidunt nisi at fermentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lacinia tincidunt nisi at fermentum.</div>

我希望右侧的红色背景侧边栏旁边有一条“绿色”背景线。

你将如何实现这一目标？

干杯

Answer 1

试试这个：

#container{
    background-color:#9cc;
    overflow:hidden;
    width:500px;
}
#content {  
    width:400px;
    border-left:100px solid #c33; 
    margin-left:-100px;
    float:right;
    display:block;
}
#sidebar {
    background-color:#c33;
    width:100px;
    border-right:2px solid green;
    display:block;
    box-sizing:content-box;
}