<div class="stripe">
</div>

<div class="stripe">
</div>

<div class="stripe">
</div>
.stripe {
  height: 15px;
  background: linear-gradient(
    to right, 
    red,
    red 20%,
    orange 20%,
    orange 40%,
    yellowgreen 40%,
    yellowgreen 60%,
    lightblue 60%,
    lightblue 80%,
    purple 80%,
    purple
  );
  margin: 0 0 20px 0;
}

.stripe:nth-child(2) {
  background-position-x: -10vw;
}

.stripe:nth-child(3) {
  background-position-x: -20vw;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.