Question

我创建了以下背景模式：

CSS：

return count;

我希望能够交替三角形的颜色，例如红色，蓝色，绿色，红色，蓝色，绿色，红色，蓝绿等等。

这可能吗？

Answer 1

我保留了原始设计作为参考。

在编辑的设计中，我有：

将背景大小设置为原始大小的两倍

改变了生成三角形的方式，这样你只需要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>

在CSS3中使用线性渐变的交替三角形颜色背景

1 个答案: