html - 带有扩展侧边栏的 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;
}