CSS 实现条纹背景

preview

刚刚写年会红包雨的时候用到了 linear-gradient 来实现条纹背景,但是突然卡壳想不起来怎么写了。
就去百度一下,所以现在把它记下来,方便以后查阅。

基础部分

使用 linear-gradient 实现没有渐变的色块

1
2
3
.color-block {
background: linear-gradient(#c498bc 50%, #81a2cf 0);
}

横向条纹

再上一个基础之上增加 background-size 属性进行 repeat

1
2
3
4
.stripe {
background: linear-gradient(#c498bc 50%, #81a2cf 0);
background-size: 100% 30px; // 宽度100%, 高度30px 如果没有no-repeat的话他会一直铺满整个div
}

竖直条纹

再在上一个的基础之上增加 linear-gradient 的朝向,然后交换 background-size 的宽高

1
2
3
4
5
.stripe {
// 向右填色 如果是 'to left' 就是向左填色
background: linear-gradient(to right, #c498bc 50%, #81a2cf 0);
background-size: 30px 100%; // 宽度30px, 高度100%
}

倾斜条纹

倾斜条纹的话就相对麻烦一点了,如果只修改 linear-gradient 的朝向为角度那么就会出现下边这个情况:

q1

1
2
3
4
.stripe1 {
background: linear-gradient(45deg, #c498bc 50%, #81a2cf 0);
background-size 30px 100%;
}

所以要修改 background-size ,但是只是这样也会有问题:

q2

1
2
3
4
.stripe2 {
background: linear-gradient(45deg, #c498bc 50%, #81a2cf 0);
background-size 30px 30px
}

结果是会形成一小块一小块的斜线色块,而不是整个倾斜条纹

所以按照现象修改 linear-gradient 之后为:

q3

1
2
3
4
5
6
7
8
9
10
11
.stripe3 {
background: linear-gradient(45deg,
#c498bc 25%,
#81a2cf 0,
#81a2cf 50%,
#c498bc 0,
#c498bc 75%,
#81a2cf 0
);
background-size 30px 30px
}

简单的实现时没问题了,但是感觉太长了。
如果要简化的话,需要使用的是 repeating-linear-gradient

1
2
3
4
5
6
7
8
9
.stripe4 {
background: repeating-linear-gradient(
45deg,
#81a2cf,
#81a2cf 15px,
#c498bc 0,
#c498bc 30px
);
}

这样的话只需要一行就可以实现 .stripe3 的效果了。

以上
2019/12/21 05:00