Adding diagonal borders to bottom/top of div element? - html

Question

I'm looking for the best way to add a diagonal border to the bottom of a div element. Preferably in a way so it would also work responsively.
This image is an example of how I would want it to look:
The dark part is the header of my website and the white part is where the content will start. So the diagonal lines will act like a seperator.
I made a little example but it's not really working yet: http://jsfiddle.net/ckknu2tr/
I'm using 2 different divs with a border, one for the left and one for the right side, code example:
.borderright {
line-height: 0%;
width: 0;
border-top: 50px solid transparent;
border-right: 400px solid white;
position: absolute;
bottom: 0;
right: 0;
}

Answer 1

You could use SVG for this. Below is a short example, which can probably be simplified, I use SVG very rarely and am not that proficient with it.
body {
background-image: url(http://i.imgur.com/XxGffrU.jpg);
background-size: cover;
background-position: center bottom;
margin: 0;
}
#your_div {
position: relative;
top: 100px;
margin-top: 100px;
width: 100%;
height: 100px;
background: white;
}
#back {
position: relative;
top: -99px;
width: 100%;
height: 100px;
}
<div id="your_div">
<svg id="back" viewBox="0 0 100 10" preserveAspectRatio="none">
<path d="M 0,4 L 45,8 50,5 55,8 100,4 100,10 0,10 z" style="fill: white;"></path>
<path d="M 0,0 L 45,8 55,8 100,0 100,10 0,10 z" style="fill: rgba(255,255,255,0.5)"></path>
</svg>
</div>