CODEWITHSUNDEEP
htmlcss
JSAddict
JSAddict

Reputation: 12427

different colored line using css

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

Upvotes: 0

Views: 312

Answers (2)

nektobit
nektobit

Reputation: 951

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

Upvotes: 0

Nitesh Patil
Nitesh Patil

Reputation: 388

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

Upvotes: 1

Related Questions