different colored line using css

Question

I have some idea to do the different colored line

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)
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

you are rolling in the deep my friend, I would go with the span using percent instead fixed px. Another option is to use canvas ;) — Tomas Ramirez Sarduy, Jan 14 '13 at 07:34
@TomSarduy that is not a wise choice since it is not supported by earlier IE versions. — JSAddict, Jan 14 '13 at 07:39
I think an image makes the most sense. One little HTTP request isn't a big deal, especially since it will be cached after the first visit. — Chris Herbert, Jan 14 '13 at 07:44
Have a look at [this](http://css3pie.com/demos/gradient-patterns/). If you figure out how it works you can make the pattern you are looking for. — Jelmer, Jan 14 '13 at 07:49
@ChrisHerbert yes one little HTTP request isn't a big deal in small scale websites but not in large scale websites. — JSAddict, Jan 14 '13 at 07:53
@Jelmer i have already seen this before. it is not supported by earlier IE versions. i asked a question regarding css3pie http://stackoverflow.com/questions/14197882/options-to-solve-browser-compatibility-issues — JSAddict, Jan 14 '13 at 07:56
How big is this website? I think there's something to be said for keeping your techniques sane and manageable and allowing an http request. You can also use a sprite, although I don't know if the dimensions of the image lend itself to that. — Chris Herbert, Jan 14 '13 at 07:59
@Prashanth please define "earlier IE versions" I do not recommend to optimise for IE 7 and below. — Jelmer, Jan 14 '13 at 08:01
@ChrisHerbert thanks for your suggestion. i ll go for images if there is no other way. before that i just wanted to check for alternate ways — JSAddict, Jan 14 '13 at 08:02
@ChrisHerbert: If you are thinking responsiveness the best way is using html+css, because you can use percent values, and in a 1600px width screen, you can have a big image — Tomas Ramirez Sarduy, Jan 14 '13 at 08:25
That image is going to be very light no matter what the dimensions. Solid blocks of color compress very well. — Chris Herbert, Jan 14 '13 at 08:40
@TomSarduy No need for that. Have a look at the posted image. It is repetitive so a repeat-x will do :) — Jelmer, Jan 14 '13 at 09:14

score 1 · Accepted Answer · answered Jan 14 '13 at 10:15

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

Nice. but it didn't support in IE8. – JSAddict Jan 15 '13 at 09:02 — JSAddict, Jan 15 '13 at 09:02

score 0 · Answer 2 · answered May 22 '18 at 03:29

You can use :before and :after pseudoelements. The example below shows how you can get away from the gradient at the color joint.

.line {
height: 11px;
background: #d1d2d4; 
position: relative;
&:before, &:after  {
    content: '';
    height: 11px;
    width: 50%;
    display: block;
}
&:before {
    background: linear-gradient(to right, blue 50%, green 50%);  
}
&:after {
    background: linear-gradient(to right, red 50%, violet 50%);
    position: absolute;
    top: 0;
    right: 0;  
}

}

https://codepen.io/nektobit/pen/wjOdww

different colored line using css

2 Answers2