css - 是否可以使用 css3 重复渐变创建此图案？

Question

您好，我有这张图片，我想从中制作背景渐变，而不是将其放入 CSS:

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

更新:

如果您查看上图，您会发现蓝色条纹的宽度不同，因此基于 @vals下面的答案是，2 个渐变不足以形成这种模式，我们需要 7 个，但我未能通过常规线性渐变或重复渐变实现这种模式，所以我在这里缺少的是如何绘制每个 strip 具有已知宽度和高度的 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