CSS倾斜侧边栏布局

本文介绍了CSS倾斜侧边栏布局的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

是否可以用CSS实现这种倾斜的侧边栏布局？右边是主要内容，我假设倾斜的侧边栏布局可以重叠额外。感谢您阅读！

Is it possible to achieve this slanted sidebar layout with CSS? The right side would be the main content where I assume the slanted sidebar layout could overlap the extra. Thanks for reading!

推荐答案

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

If you are going to add some text, or elements inside the green div, it is better to do it this way than creating only a shape.

.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%;
}

这篇关于CSS倾斜侧边栏布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！