Slopy Element with CSS3

by Kheema Pandey

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