如何在响应背景中创建对角线

Question

我正试图在元素的背景中创建一个对角线背景。我可以使用梯度很容易地做到这一点，但这对于一个响应型网站来说，所以元素需要是流动的。

我可以为固定形状做这样的事情。。。

div {
  width:200p
  height:200px;
  margin-bottom:2em;
  border:1px solid #aaa;
  background:linear-gradient(45deg,#ffffff 49%,#aaa 50%,#ffffff 51%);
}

这是使用带有硬停止的旋转渐变，但它使用的是固定宽度。我在这里做了一个代码笔，描述了宽度以百分比设置时的外观，正如你所看到的，这个概念被打破了。http://codepen.io/juicypixels/pen/gPravL?editors=110

我很想看看是否有一种响应式的方法来做这件事，即使我必须使用javascript。

提前谢谢。

Answer 1

尝试

background:linear-gradient(to bottom left,#ffffff 49%,#aaa 50%,#ffffff 51%);

而不是

background:linear-gradient(45deg,#ffffff 49%,#aaa 50%,#ffffff 51%);