css - 在 CSS3 中使用线性渐变交替三 Angular 形颜色背景

Question

我创建了以下背景图案:

https://codepen.io/anon/pen/JJvbjz

CSS:

body {
    background:
        linear-gradient(-120deg, transparent 63%, #fff 63%), 
        linear-gradient(120deg, transparent 63%, #fff 63%), 
        linear-gradient(to bottom, blue, blue);
    background-size: 90px 50px;
    background-repeat: repeat-x;
}

我希望能够改变三 Angular 形的颜色，例如红色，蓝色，绿色，红色，蓝色，绿色，红色，蓝绿色等。

这可能吗？

Answer 1

我保留了您的原始设计作为引用。

在编辑后的设计中，我有:

将背景尺寸设置为原始尺寸的两倍

改变了生成三 Angular 形的方式，这样你只需要 2 个元素而不是 3 个。

并在第 3 和第 4 个背景图像中添加了一个非 0 位置，使它们看起来与前 2 个交错

.test {
  width: 100%;
  height: 100px;
    background:
        linear-gradient(-120deg, transparent 63%, #fff 63%), 
        linear-gradient(120deg, transparent 63%, #fff 63%), 
        linear-gradient(to bottom, blue, blue);
    background-size: 90px 50px;
    background-repeat: repeat-x;
}

.test2 {
    width: 100%;
    height: 60px;
    background-size: 180px 60px;
    background-repeat: repeat-x;
    background-image: linear-gradient(120deg, blue 26px, transparent 28px),
                      linear-gradient(-120deg, blue 26px, transparent 28px),
                      linear-gradient(120deg, red 26px, transparent 28px),
                      linear-gradient(-120deg, red 26px, transparent 28px);
    background-position: 0px 0px, 0px 0px, 90px 0px, 90px 0px;
}

<div class="test"></div>
<div class="test2"></div>