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