如何才能最好地创建响应式双色调对角背景？

Question

尝试创建像这样的响应式双色调对角线背景。我已经尝试过线性渐变，但对角线出现过于锯齿状。我也试过变换偏斜，但是还有其他问题，包括现代浏览器的浏览器兼容性。所以我正在寻找替代方案。是否可以使用SVG或类似的东西？我对SVG没有多少经验。

Answer 1

这是一个如何创建背景的小例子，我希望能帮助http://jsfiddle.net/step/qrtfwqar/1/

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

细节是45deg

Answer 2

您可以使用类似@Daniel McClintock的响应式对角线div解决方案，http://codepen.io/danielsmcclintock/pen/ljeis或@Gabriel Viva，http://codepen.io/gabssnake/pen/yhpvI。而不是将文本放在div中，position:absolute在其上面放置另一个div，并将文本在其中垂直和水平居中