如何最好地创建响应式的双色调对角线背景？答案

【问题标题】：How can I best creat a responsive, two-tone diagonal background?如何最好地创建响应式的双色调对角线背景？
【发布时间】：2015-06-23 12:25:35
【问题描述】：

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

【问题讨论】：

标签： css svg

【解决方案1】：

这是一个如何制作背景的小例子，希望对http://jsfiddle.net/step/qrtfwqar/1/有帮助

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

细节是45度

【讨论】：

【解决方案2】：

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

【讨论】：