How can I best creat a responsive, two-tone diagon

Question

Trying to create a responsive, two tone diagonal background like this one. I've already tried linear-gradients, but the diagonal line comes out too jagged. I've also tried transform skew, but that had other issues, including browser compatibility for modern browsers. So I'm looking for an alternative. Is it perhaps possible to do with SVG or something similar? I don't have much experience with SVG.

Answer 1

this is a small example of how you could make a background, i hope to help http://jsfiddle.net/step/qrtfwqar/1/

background-image: -webkit-linear-gradient(45deg, #0000FF 50%, #6B6BFF 50%);

the detail is 45deg

Answer 2

You can use something like @Daniel McClintock's responsive diagonal divs solution, http://codepen.io/danielsmcclintock/pen/ljeis, or @Gabriel Viva's, http://codepen.io/gabssnake/pen/yhpvI. Instead of putting text inside the divs, position:absolute another div on top of it, and center the text vertically and horizontally within that