border with alternating colors (no gradient)

Question

On an edge of a div (border-bottom) i need to apply more than 1 color but without using the effect of degrade that mixes colors.

Image for example:

With the effect of degrade I know how to do but the colors are mixed, and if they are not hexadecimais/rgb Next to each other, they get weird. How can I make this color change effect without mixing?

Answer 1

It’s usually done with something on that same gradient line. It’s a gradient, but it doesn’t mix colors because the color changes are done abruptly, at the same point.

If this is exactly what you’re talking about that you want to avoid, I think the only other alternatives would be using an image or creating several fine Ivs alternating.

Anyway I leave two examples, one for gradient and the other for fine Ivs.

GRADIENT

body {
  margin: 0;
}

.box {
  text-align: center;
  position: relative;
  background: #eee;
  height: 15px;
  width: 100vw;
}

.box:after {
  background: linear-gradient(to right, #9400D3 14.3%, #4B0082 14.3%, #4B0082 28.6%, #0000FF 28.6%, #0000FF 42.9%, #00FF00 42.9%, #00FF00 57.2%, #FFFF00 57.2%, #FFFF00 71.5%, #FF7F00 71.5%, #FF7F00 85.8%, #FF0000 85.8%);
  position: absolute;
  content: '';
  height: 4px;
  right: 0;
  left: 0;
  bottom: 0;
}

<div class="box"></div>

DIVS

body {
  margin: 0;
  width: 100vw;

}

#spacer {
  width: 100%;
  height: 11px;
  background: #eee;
}

#border {
  width: 100%;
  height: 4px;
}

#border > div {
  width: 14.28%;
  height: 4px;
  float: left;
}

#border>div:nth-child(1) {
  background: #9400D3;
}

#border>div:nth-child(2) {
  background: #4B0082;
}

#border>div:nth-child(3) {
  background: #0000FF;
}

#border>div:nth-child(4) {
  background: #00FF00;
}

#border>div:nth-child(5) {
  background: #FFFF00;
}

#border>div:nth-child(6) {
  background: #FF7F00;
}

#border>div:nth-child(7) {
  background: #FF0000;
}

<div id="spacer"></div>
<div id="border">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>