全宽对角线div

Question

我目前正在建立一个网站，并且photoshop图片显示必须对角创建部分，交替颜色如下图所示。

我想知道是否有人可以帮我处理这样一个请求的CSS（仅用于对角线框） - 我只能想到旋转或倾斜，但是然后div必须从页面开始才能不留下空白，这显然不是理想的，特别是因为要求是网站的响应。

提前致谢。

Answer 1

您可以使用:before和:after伪元素的边框创建三角效果。

Demo Fiddle

HTML

<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>

CSS

div {
    height:200px;
    width:200px;
}
div:nth-child(odd) {
    position:relative;
    background:lightgrey;
    margin-top:20px;
}
div:nth-child(odd):before {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 20px 200px 0px 0;
    border-color: transparent lightgrey transparent transparent;
    content:'';
    position:absolute;
    right:0;
    top:-20px;
}
div:nth-child(odd):after {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 20px 200px 0px 0;
    border-color: transparent white transparent transparent;
    content:'';
    position:absolute;
    right:0;
    bottom:0px;
}