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

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

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

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

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

.stripe {
  height: 50px;
  margin: 0 0 1rem 0;
}
.stripe-1 {
  background: linear-gradient(
    to right, 
    red,
    red 0%,
    blue 100%,
    blue
  );
}

.stripe-2 {
  background: linear-gradient(
    to right, 
    red,
    red 20%,
    blue 80%,
    blue
  );
}
.stripe-3 {
  background: linear-gradient(
    to right, 
    red,
    red 40%,
    blue 60%,
    blue
  );
}

.stripe-4 {
  background: linear-gradient(
    to right, 
    red,
    red 47%,
    blue 53%,
    blue
  );
}

.stripe-5 {
  background: linear-gradient(
    to right, 
    red,
    red 50%,
    blue 50%,
    blue
  );
}