CSS：實現一個斑馬線效果 （條紋背景）

斑馬線效果

<div class="zebra-crossing"></div>

.zebra-crossing {
  width: 180px;
  height: 100px;
  margin: 1em;
  background: linear-gradient(to right, #fff 50%, #bbbbbb 0);
  background-size: 30px 100%;
}

幾種條紋背景的實現

1. 基礎漸變

<div class="demo1"></div>

.demo1 {
  width: 200px;
  height: 100px;
  margin: 1em;
  background: linear-gradient(#fb3, yellowgreen);
}

2. 水平條紋

<div class="demo2"></div>

.demo2 {
  width: 200px;
  height: 100px;
  margin: 1em;
  background: linear-gradient(#fb3 33.3%, #58a 0, #58a 66.6%, yellowgreen 0);
  background-size: 100% 45px;
}

3. 垂直條紋

<div class="demo3"></div>

.demo3 {
  width: 200px;
  height: 100px;
  margin: 1em;
  background: linear-gradient(to right, /* 或 90deg */
      #fb3 50%, #58a 0);
  background-size: 30px 100%;
}

4. 不理想的斜條紋

<div class="demo4"></div>

.demo4 {
  width: 200px;
  height: 100px;
  margin: 1em;
  background: linear-gradient(45deg, #fb3 50%, #58a 0);
  background-size: 30px 30px;
}

5. 斜條紋1

<div class="demo5"></div>

.demo5 {
  width: 200px;
  height: 100px;
  margin: 1em;
  background: linear-gradient(45deg, #fb3 25%, #58a 0, #58a 50%, #fb3 0, #fb3 75%, #58a 0);
  background-size: 30px 30px;
}

6. 斜條紋2

<div class="demo6"></div>

.demo6 {
  width: 200px;
  height: 100px;
  margin: 1em;
  background: linear-gradient(45deg, #fb3 25%, #58a 25%, #58a 50%, #fb3 50%, #fb3 75%, #58a 75%);
  background-size: 30px 30px;
}

7. 經過計算的 15px 條紋

<div class="demo7"></div>

.demo7 {
  width: 200px;
  height: 100px;
  margin: 1em;
  background: linear-gradient(45deg, #fb3 25%, #58a 25%, #58a 50%, #fb3 50%, #fb3 75%, #58a 75%);
  background-size: 42.43px 42.43px;
}

8. 循環漸變

<div class="demo8"></div>

.demo8 {
  width: 200px;
  height: 100px;
  margin: 1em;
  background: repeating-linear-gradient(45deg, #fb3, #58a 30px);
}

9. 不需要計算的斜條紋

<div class="demo9"></div>

.demo9 {
  width: 200px;
  height: 100px;
  margin: 1em;
  background: repeating-linear-gradient(45deg, #fb3, #fb3 15px, #58a 0, #58a 30px);
}

10. 不需要計算的其它角度的斜條紋

<div class="demo10"></div>

.demo10 {
  width: 200px;
  height: 100px;
  margin: 1em;
  background: repeating-linear-gradient(60deg,
      #fb3, #fb3 15px, #58a 0, #58a 30px);
}

11. 兩種方式結合，規範斜角

<div class="demo11"></div>

.demo11 {
  width: 200px;
  height: 100px;
  margin: 1em;
  background: repeating-linear-gradient(45deg, #fb3 0, #fb3 25%, #58a 0, #58a 50%);
  background-size: 42.426406871px 42.426406871px;
}

12. 同色繫條紋

<div class="demo12"></div>

.demo12 {
  width: 200px;
  height: 100px;
  margin: 1em;
  background: #58a;
  background-image: repeating-linear-gradient(30deg, hsla(0, 0%, 100%, .1), hsla(0, 0%, 100%, .1) 15px, transparent 0, transparent 30px);
}

https://codepen.io/xiangshuo1992/pen/qLdWdY