Why is the connection of segmented color strips made by linear-gradient virtual?

want to do segmented color bar effect, but each segment of the connection is virtual, how to eliminate it? Is there any way to avoid it?
clipboard.png
.top {

height: 28px;
background-image:
  linear-gradient(
      to right,
      $red1,
      $red1 20%,
      $yellow1 20%,
      $yellow1 40%,
      $blue1 40%,
      $blue1 60%,
      $purple1 60%,
      $purple1 80%,
      $brown1 80%,
      $brown1 100%,);
      }
Css
Apr.30,2021

.liner {
  height: 66px;
  background-repeat: no-repeat;
  background-size: 20% 100%, 40% 100%, 60% 100%, 80% 100%, 100% 100%;
  background-position: 0 bottom;
  background-image:
    linear-gradient(-sharp000,-sharp000),
    linear-gradient(green, green),
    linear-gradient(pink, pink),
    linear-gradient(yellow, yellow),
    linear-gradient(orange, orange);
}

I tried it, but it was also necessary (probably chrome bug), so I took a different approach, so it was OK

).

reference link

Menu