是否可以使用css3重复渐变创建此模式？

Question

嗨我有这个图像我想从它做一个背景渐变而不是把它放到CSS中：

是否可能或我是否推动CSS3渐变的极限 而且我没有寻找具有多个div或任何类型的黑客的解决方案，只有一个css类的渐变或重复渐变，我可以将其分配给一个元素，并为其分配所需的模式。

更新

如果你查看上面的图片，你会看到蓝色条纹的宽度不同，所以基于@vals下面的答案，2个渐变不足以有这种模式，我们需要7但是我没有用常规线性渐变或重复的模式来实现这种模式，所以我在这里缺少的是如何为具有已知宽度和高度的div绘制每个条带以具有此具有相同条纹数和条带宽度的图案。

Answer 1

您可以在同一背景中设置2个不同的渐变。然后，您只需要根据需要对它们进行尺寸标注和定位

div {
    width: 400px;
    height: 400px;
    background-image: repeating-linear-gradient(45deg, blue 0px, blue 20px, lightblue 20px, lightblue 40px), repeating-linear-gradient(135deg, blue 0px, blue 20px, lightblue 20px, lightblue 40px);
    background-size: 100% 50%;
    background-position: top left, bottom left;
    background-repeat: no-repeat;
}

demo