CSS div with different background colors without rainbow effect

Question

I would like to create a css bar like the this:

The first way i know is to use number divs each with its onw color.

The second way is to use one div with `

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

this way achieves what I want, however the colors fade into each other like a rainbow, and this is the effect that i don't want.

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

cheers.

EDIT: Thanks a lot every one, for your time and help.

Answer 1

See CSS cross-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>