[css] 使用css3实现一个斑马线的效果

@ferrinweb 如果需要很多或者无限扩展的斑马线，你这个方案就有缺点了
@cxwht 你的方案需要增加额外的元素，不太理想
最好的办法是用渐变背景实现
linear-gradient( [ [ <angle> | [top | bottom] || [left | right] ],]? <color-stop>[, <color-stop>]+);
/*角度|方向、开始颜色 开始位置、结束颜色 结束位置*/
我们将开始位置与结束位置设置为相等或大于，就可以得到条纹图案。示例：https://codepen.io/xiangshuo1992/pen/qLdWdY （含11个demo）水平条纹
{background: linear-gradient(#fb3 33.3%,#58a 0, #58a 66.6%, yellowgreen 0);background-size: 100% 45px;
}
垂直条纹
{background: linear-gradient(to right, /* 或 90deg */#fb3 50%, #58a 0);background-size: 30px 100%;
}
45deg斜条纹
{background: linear-gradient(45deg,#fb3 25%, #58a 0, #58a 50%,#fb3 0, #fb3 75%, #58a 0);background-size: 30px 30px;
}/*计算准确的15px宽斜条纹*/
{background: linear-gradient(45deg,#fb3 25%, #58a 0, #58a 50%,#fb3 0, #fb3 75%, #58a 0);background-size: 42.43px 42.43px;
}
更好的斜向条纹
/*循环渐变实现斜条纹*/
{background: repeating-linear-gradient(45deg,#fb3, #fb3 15px, #58a 0, #58a 30px);
}/*两种方式结合*/
{background: repeating-linear-gradient(45deg,#fb3 0, #fb3 25%, #58a 0, #58a 50%);background-size: 42.43px 42.43px;
}
灵活的同色系条纹
{background: #58a;background-image: repeating-linear-gradient(30deg,hsla(0,0%,100%,.1),hsla(0,0%,100%,.1) 15px,transparent 0, transparent 30px);
}