css条纹背景

1、横条纹

<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、斜条纹

<div class="box box2"></div>
<style>
    /* 使用 linear-gradient */
	.box2 {
	    background: linear-gradient(45deg,#fb3 25%, #58a 0, #58a 50%,#fb3 0, #fb3 75%, #58a 0);
	    background-size: 42px 42px;
	}
	/* 使用 repeating-linear-gradient  */
	.box2 {
	    /* background: repeating-linear-gradient(45deg,#fb3,#fb3 15px,#58a 0, #58a 30px); */
	    /* 简化语法 */
        background: repeating-linear-gradient(45deg,#fb3 0 15px,#58a 0 30px);
	}
	/* 二者结合：当为45°斜条纹的时候建议二者结合，通过重复线性渐变来简化贴片的代码  */
     .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°斜条纹

<div class="box box2"></div>
<style>
	/* 使用 repeating-linear-gradient  */
	.box2 {
        background: repeating-linear-gradient(60deg, #fb3 0 15px, #58a 0 30px);
	}
    .box {
        width: 200px;
        height: 100px;
        margin-bottom: 20px;
    }
</style>