SOURCE

<div class="a"></div>

<div class="b"></div>

<div class="c"></div>

<div class="d"></div>

<div class="e"></div>

/* 如果多个色标具有相同的位置，它们会产生一个无限小的过渡区域，
过渡的起止色分别是第一个和最后一个指定值。从效果上看，颜色会在那
个位置突然变化，而不是一个平滑的渐变过程。 */


/* 水平条纹 */

.a {
    /* background: linear-gradient(#fb3 30%, #58a 30%); */
    /* 把第二个色标的位置值设置为 0，那它的位置就总是会被浏览器调整为前一个色标的位置值 */
    /* background: linear-gradient(#fb3 40%, #58a 0); */
    /* 创建超过两种颜色的条纹 */
    background: linear-gradient(#fb3 33.3%, #58a 0, #58a 66.6%, yellowgreen 0);
    background-size: 100% 45px;
}

div {
    width: 500px;
    height: 500px;
    margin: 10px;
}


/* 垂直条纹 改变指定渐变的方向*/

.b {
    background: linear-gradient(to right, /* 或 90deg */
    #fb3 50%, #58a 0);
    background-size: 50px 100%;
}


/* 斜向条纹 */

.c {
    background: linear-gradient(45deg, #fb3 25%, #58a 0);
    background-size: 50px 50px;
}


/**
更好的创建斜向条纹
循环式的加强版repeating-linear-gradient
第二个色标的位置值设置为 0，那它的位置就
总是会被浏览器调整为前一个色标的位置值

简写语法：两个连续的色标具有相同的颜色和不同的位置
*/

.d {
    background: repeating-linear-gradient(60deg, #fb3 0 15px, #58a 0 30px);
}


/*
  同色系条纹
*/

.e {
    background: #58a;
    background-image: repeating-linear-gradient(30deg, hsla(0, 0%, 100%, .1) 0 15px, transparent 0 30px);
}