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

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%);