linear-gradient-issue

by Richard Hunter

HTML

<div class="container alpha">
</div>

<div class="container beta">
</div>

CSS

.container {
  height: 100px;
  margin-bottom: 20px;
}

.alpha {
  background-image: linear-gradient(90deg, blue 20px,
      red 0, red 40px,
      blue 0, blue 60px,
      red 0, red 80px,
      blue 0, blue 100px,
      red 0, red 120px,
      blue 0, blue 140px);
}

.beta {
  background-image: linear-gradient(90deg, blue 20px,
      red 0, red 40px,
      blue 0, blue 60px,
      red 0, red 80px,
      blue 0, blue 100px,
      red 0, red 120px,
      blue 0, blue 140px,
      red 0, red 160px,
      blue 0, blue 180px);
}