border with alternating colors (without degrade)

Question

border with alternating colors (without degrade)

Navigation

#1 by (5 votes)

2

At a border of a% of% color% I need to apply more than 1 color but without using the% color% effect that merges colors.

Image for example:

With the effect of degrading, I know how to do it, but the colors blend, and if they are not div pendent but different, they are strange. How can I make this color-changing effect without merge?

css

asked by anonymous 19.05.2017 / 18:04

1 answer

Why do you need to close the script tag? Length of content returning incorrect value

score 5 · Accepted Answer

It is usually done with something on this same gradient line. It is a gradient, but it does not blend colors because the color changes are made abruptly at the same point.

If this is exactly what you're saying you want to avoid, I think the only other alternatives would be using an image or creating several fine

Anyway, I leave two examples, one by gradient and another by thin divs.

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>