2种CSS制作分段彩条的方法

在做一个练习时候得知一种分段彩条做法。但是实现后发现Chrome上色彩交界处有过渡渐变，不是我想要的效果。经过高手指点，然后就有了第二种做法。

Codepen： 点击查看线上效果

image.png

.bar1 {
    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%,);
  }

.bar2 {
  background-repeat: no-repeat;
  background-size: 20% 100%, 40% 100%, 60% 100%, 80% 100%, 100% 100%;
  background-image:
     linear-gradient($red1,$red1),
     linear-gradient($yellow1, $yellow1),
     linear-gradient($blue1, $blue1),
     linear-gradient($purple1, $purple1),
     linear-gradient($brown1, $brown1);
}