1、横条纹
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/f93beebdb3891c3db2364fb6a89658fd.png)
<div class="box box2"></div>
<style>
.box2 {
background: linear-gradient(#fb3 25%, #58a 0, #58a 50%,#fb3 0, #fb3 75%, #58a 0);
background-size: 30px 30px;
}
.box {
width: 200px;
height: 100px;
margin-bottom: 20px;
}
</style>
2、斜条纹
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/d27b011c107c5d03222a01b1efff1906.png)
<div class="box box2"></div>
<style>
.box2 {
background: linear-gradient(45deg,#fb3 25%, #58a 0, #58a 50%,#fb3 0, #fb3 75%, #58a 0);
background-size: 42px 42px;
}
.box2 {
background: repeating-linear-gradient(45deg,#fb3 0 15px,#58a 0 30px);
}
.box2 {
background: repeating-linear-gradient(45deg, #fb3 0 25%, #58a 0 50%);
background-size: 42px 42px;
}
.box {
width: 200px;
height: 100px;
margin-bottom: 20px;
}
</style>
3、60°斜条纹
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/6d7365980b5c00e3c215a999aecf4e9e.png)
<div class="box box2"></div>
<style>
.box2 {
background: repeating-linear-gradient(60deg, #fb3 0 15px, #58a 0 30px);
}
.box {
width: 200px;
height: 100px;
margin-bottom: 20px;
}
</style>