[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);
}

个人简介

我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易，
但坚持一定很酷。欢迎大家一起讨论

主目录

与歌谣一起通关前端面试题