css - How can I best creat a responsive, two-tone diagonal background?

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