SOURCE

<div class="e1">第一步，先做一个重复的“背景”，在ps中，这个重复的背景包含4个颜色，所以要4组渐变，4组渐变的过度是0</div>
<div class="e2">第二步，做一个单元格，设置这个单元格的大小，角度。</div>
<div class="e3">第三步，重复平铺</div>
<div class="e4">45度的角度可以很好的衔接，如果是其他角度呢，这个方法做不到了</div>
<div class="e5">所以通过 repeating-linear-gradient 实现，blue 30px 是指蓝色的渐变长度是30px</div>
<div class="e6">相当于这么用linear-gradient。</div>
<div class="e7">很多时候，渐变条纹一般是同一个色系的，这种比较好的处理方式是，不在为每个条纹指定单独的颜色，而是把最深的颜色指定为背景色，把半透明的白色条纹覆盖到背景色上</div>

div {
  width:20em;
  height:10em;
  margin-bottom: 10px;
}
.e1 {
  background-image:linear-gradient(yellow 25%, blue 25%, blue 50%, yellow 50%, yellow 75%, blue 75%);
  -background-size:30px 30px;
}
.e2 {
  background-image:linear-gradient(45deg, yellow 25%, blue 0, blue 50%, yellow 0, yellow 75%, blue 0);
  background-size:30px 30px;
  background-repeat:no-repeat;
}
.e3 {
  background-image:linear-gradient(45deg, yellow 25%, blue 0, blue 50%, yellow 0, yellow 75%, blue 0);
  background-size:30px 30px;
}
.e4 {
  background-image:linear-gradient(60deg, yellow 25%, blue 0, blue 50%, yellow 0, yellow 75%, blue 0);
  background-size:30px 30px;
}
.e5 {
  background-image:repeating-linear-gradient(45deg, yellow, blue 30px);
}
.e6 {
  background-image:linear-gradient(45deg, yellow 0, blue 30px, yellow 30px, blue 60px, yellow 60px, blue 90px);
}
.e7 {
  background:#58a;
  background-image: repeating-linear-gradient(30deg, 
    hsla(0,0%,100%,.1),
    hsla(0,0%,100%,.1) 15px,
    transparent 0,
    transparent 30px
  );
}