CSS div with different background colors without rainbow effect

Question

I would like to create a css panel, for example:

The first way I know is to use numeric divs each with its color color.

The second way is to use one div with `

background: -webkit-linear-gradient (left, red, orange, yellow, green, blue, indigo); 

in this way, what I want is achieved, but the colors disappear with each other like a rainbow, and this is the effect that I do not want.

so is there a way to achieve a css div with different colors, like the one shown below, without the rainbow effect?

greetings.

EDIT: Many thanks to everyone for your time and help.

Answer 1

See CSScross-browser code below:

.bar {
  height: 10px;
  width: 350px;
  background: -webkit-linear-gradient(left, red 0%, red 14.28%, orange 14.28%, orange 28.57%, yellow 28.57%, yellow 42.85%, green 42.85%, green 57.14%, blue 57.14%, blue 71.43%, indigo 71.43%, indigo 85.72%, violet 85.72%, violet 100%);
  background: red; /* For browsers that do not support gradients */
  /* For Opera 11.1 to 12.0 */
  background: -o-linear-gradient(left, red 0%, red 14.28%, orange 14.28%, orange 28.57%, yellow 28.57%, yellow 42.85%, green 42.85%, green 57.14%, blue 57.14%, blue 71.43%, indigo 71.43%, indigo 85.72%, violet 85.72%, violet 100%);
  /* For Fx 3.6 to 15 */
  background: -moz-linear-gradient(left, red 0%, red 14.28%, orange 14.28%, orange 28.57%, yellow 28.57%, yellow 42.85%, green 42.85%, green 57.14%, blue 57.14%, blue 71.43%, indigo 71.43%, indigo 85.72%, violet 85.72%, violet 100%);
  /* Standard syntax */
  background: linear-gradient(to right, red 0%, red 14.28%, orange 14.28%, orange 28.57%, yellow 28.57%, yellow 42.85%, green 42.85%, green 57.14%, blue 57.14%, blue 71.43%, indigo 71.43%, indigo 85.72%, violet 85.72%, violet 100%); 
}

<div class="bar"></div>

Run codeHide result

Answer 2

You can achieve this effect with a gradient if you specify color positions:

background: -moz-linear-gradient(top, #ff3232 0%, #ff2828 35%, #48ff30 35%, #48ff30 35%, #48ff30 68%, #7db9e8 68%); 

CSS, , .

Answer 3

:

background: -webkit-linear-gradient(left, red, red 20%, orange 20%, orange 40%, yellow 40%, yellow 60%, indigo 60%, indigo 80%, blue 80%, blue 100%); 

div.

, , , 20% 40%, .

Fiddle: https://jsfiddle.net/4hrc7ydx/