<div class="s-line-p"></div>

.s-line-p{
height:16px;
background-size:20px 16px;
background-image:linear-gradient(90deg,#fbd 16px,transparent 0);
margin:5px 0;}

<div class="s-line-y"></div>

.s-line-y{
height:12px;
background-size:14px 12px;
background-image:linear-gradient(90deg,#fd6 12px,transparent 0);
margin:5px 0;}

<div class="s-line-g"></div>

.s-line-g{
height:12px;
background-size:16px 12px;
background-image:linear-gradient(90deg,#ce7 12px,transparent 0);
margin:5px 0;}

<div class="s-line-b"></div>

.s-line-b{
height:12px;
background-size:20px 12px;
background-image:linear-gradient(90deg,#bdf 12px,transparent 0);
margin:5px 0;}

<div class="s-line-v"></div>

.s-line-v{
height:8px;
background-size:16px 8px;
background-image:linear-gradient(90deg,#cbf 8px,transparent 0);
margin:5px 0;}