CSS倾斜的侧边栏布局

Question

是否可以使用CSS实现这种倾斜的侧边栏布局？右侧将是我认为倾斜侧边栏布局可能与额外重叠的主要内容。谢谢你的阅读！

Answer 1

尝试这样的事情......

#shape {
    border-top: 100px solid green;
    border-right: 20px solid transparent;
    height: 0;
    width: 100px;
}

小提琴：http://jsfiddle.net/3wLJj/1/

更多信息：http://css-tricks.com/examples/ShapesOfCSS/

Answer 2

如果要在绿色div中添加一些文本或元素，最好这样做而不是仅创建一个形状。

Fiddle

.main{
    width:60%;
    background:green;
    height:400px;
    position:relative;
    color:white;
}
.main:after{
    content:'';
    position:absolute;
    right:-40px;
    border-top: 400px solid green;
    border-right: 40px solid transparent;

}
.side{
    margin-left:10%;
    width:30%;
}