如何在响应式背景中创建对角线[重复]

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