Home/ Questions/Q 9128203
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T07:27:37+00:00

I have some idea to do the different colored line Use it as an

  • 0

I have some idea to do the different colored line

  1. Use it as an image (not good since i am going to use it all over my website and it will increase the http request)
    enter image description here

  2. Define 4 or 5 classes(widht=50px,height=5px,color=somecolor) in css and use the classes in html. (I may need to use more than 20 span, i dont want to increase the number of DOM elements)

Can anyone tell me some other way to do do that different colored line using css and html?

Thanks

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You can achieve it using css3.

    apply this css to your div

    .multicolor
{
 height:5px;
 width:100%;
 background-image: -webkit-linear-gradient( left, red, orange, yellow, green, blue,indigo,violet, indigo, blue, green, yellow, orange, red );
 background-image: -moz-linear-gradient( left, red, orange, yellow, green, blue,indigo, violet, indigo, blue, green, yellow, orange,red );
 background-image: -o-linear-gradient( left, red, orange, yellow, green, blue,indigo, violet, indigo, blue, green, yellow, orange,red );
 background-image: -ms-linear-gradient( left, red, orange, yellow, green, blue,indigo, violet, indigo, blue, green, yellow, orange,red );
 background-image: -khtml-linear-gradient( left, red, orange, yellow, green, blue,indigo, violet, indigo, blue, green, yellow, orange,red );
 background-image: linear-gradient( left, red, orange, yellow, green, blue,indigo, violet, indigo, blue, green, yellow, orange,red );
}

    JSfiddle Demo

    • 0