full width diagonal div - html

Question

I am currently building a site and the photoshop image shows that sections must be created diagonally, alternating colors as shown in the picture below.
I am wondering if somebody might help me with the CSS for such a request (just for the diagonal boxes) - I can only think of rotating or skewing, but then the div will have to start off the page in order to not leave gaps, and this obviously isn't ideal especially as the requirements are that the site is responsive.
Thanks in advance.

Answer 1

You can do this by creating triangle effects using the borders of the :before and :after pseudo elements.
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;
}