Live Code::DevDic

div {
  width: 200px;
  height: 100px;
  float: left;
  margin: 50px 20px 20px;
  position: relative;
}
div::after {
  content: attr(data-type);
  position: absolute;
  display: inline-block;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 11px;
}
div:nth-of-type(odd)::after {
  top: -20px;
}
div:nth-of-type(even)::after {
  bottom: -20px;
}

div::before {
  content: attr(class);
  position: absolute;
  left: 10px;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  text-shadow: 0 0 4px #FFF;
}

.linear-basic {
    background: red; /* 그라디언트를 지원하지 않는 경우 */
    background: -webkit-repeating-linear-gradient(#FF0000, #FFFF00); /* For Safari 5.1 to 6.0 */
    background: -o-repeating-linear-gradient(#FF0000, #FFFF00); /* For Opera 11.1 to 12.0 */
    background: -moz-repeating-linear-gradient(#FF0000, #FFFF00); /* For Firefox 3.6 to 15 */
    background: repeating-linear-gradient(#FF0000, #FF0000 10%, #FFFF00 30%, #00FF00 20%) ; /* 표준(마지막에 작성) */
}

.linear-angle {
    background: repeating-linear-gradient(-45deg, #FF0000, #FF0000 20px, #FFFF00 40px, #00FF00 10px);
}

.linear-direction {
    background: repeating-linear-gradient(to right, #FF0000, #FF0000 20px, #FFFF00 40px, #00FF00 50px);
}

.linear-diagonal {
    background: repeating-linear-gradient(to bottom right, #FF0000, #FF0000 20px, #FFFF00 40px, #00FF00 10px);
}

.linear-transparent {
    background: repeating-linear-gradient(to right, rgba(255, 0, 0, 0), rgba(0, 255, 0, 0) 10px, rgba(0, 255, 0, 1) 20px),
        url("https://resrc.devdic.com/img/bysize/below_200/01.png");
}

Console