How does the <hr> style have multiple colors?

Question

I need to create <hr /> , for example:

. I work with bootstrap, and for a long time I searched the getbootstrap page on the Internet as well. I cannot find what I am looking for, so I hope some of you will know how to do this.

As I said, this should be with bootstrap or plain css, less scss and not allowed.

Thanks in advance

Answer 1

Another option is to use linear-gradient as the background:

 hr.colored { border: 0; /* in order to override TWBS stylesheet */ height: 5px; background: -moz-linear-gradient(left, rgba(196,222,138,1) 0%, rgba(196,222,138,1) 12.5%, rgba(245,253,212,1) 12.5%, rgba(245,253,212,1) 25%, rgba(255,208,132,1) 25%, rgba(255,208,132,1) 37.5%, rgba(242,122,107,1) 37.5%, rgba(242,122,107,1) 50%, rgba(223,157,185,1) 50%, rgba(223,157,185,1) 62.5%, rgba(192,156,221,1) 62.5%, rgba(192,156,221,1) 75%, rgba(95,156,217,1) 75%, rgba(95,156,217,1) 87.5%, rgba(94,190,227,1) 87.5%, rgba(94,190,227,1) 87.5%, rgba(94,190,227,1) 100%); /* FF3.6+ */ background: -webkit-linear-gradient(left, rgba(196,222,138,1) 0%, rgba(196,222,138,1) 12.5%, rgba(245,253,212,1) 12.5%, rgba(245,253,212,1) 25%, rgba(255,208,132,1) 25%, rgba(255,208,132,1) 37.5%, rgba(242,122,107,1) 37.5%, rgba(242,122,107,1) 50%, rgba(223,157,185,1) 50%, rgba(223,157,185,1) 62.5%, rgba(192,156,221,1) 62.5%, rgba(192,156,221,1) 75%, rgba(95,156,217,1) 75%, rgba(95,156,217,1) 87.5%, rgba(94,190,227,1) 87.5%, rgba(94,190,227,1) 87.5%, rgba(94,190,227,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(left, rgba(196,222,138,1) 0%, rgba(196,222,138,1) 12.5%, rgba(245,253,212,1) 12.5%, rgba(245,253,212,1) 25%, rgba(255,208,132,1) 25%, rgba(255,208,132,1) 37.5%, rgba(242,122,107,1) 37.5%, rgba(242,122,107,1) 50%, rgba(223,157,185,1) 50%, rgba(223,157,185,1) 62.5%, rgba(192,156,221,1) 62.5%, rgba(192,156,221,1) 75%, rgba(95,156,217,1) 75%, rgba(95,156,217,1) 87.5%, rgba(94,190,227,1) 87.5%, rgba(94,190,227,1) 87.5%, rgba(94,190,227,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(left, rgba(196,222,138,1) 0%, rgba(196,222,138,1) 12.5%, rgba(245,253,212,1) 12.5%, rgba(245,253,212,1) 25%, rgba(255,208,132,1) 25%, rgba(255,208,132,1) 37.5%, rgba(242,122,107,1) 37.5%, rgba(242,122,107,1) 50%, rgba(223,157,185,1) 50%, rgba(223,157,185,1) 62.5%, rgba(192,156,221,1) 62.5%, rgba(192,156,221,1) 75%, rgba(95,156,217,1) 75%, rgba(95,156,217,1) 87.5%, rgba(94,190,227,1) 87.5%, rgba(94,190,227,1) 87.5%, rgba(94,190,227,1) 100%); /* IE10+ */ background: linear-gradient(to right, rgba(196,222,138,1) 0%, rgba(196,222,138,1) 12.5%, rgba(245,253,212,1) 12.5%, rgba(245,253,212,1) 25%, rgba(255,208,132,1) 25%, rgba(255,208,132,1) 37.5%, rgba(242,122,107,1) 37.5%, rgba(242,122,107,1) 50%, rgba(223,157,185,1) 50%, rgba(223,157,185,1) 62.5%, rgba(192,156,221,1) 62.5%, rgba(192,156,221,1) 75%, rgba(95,156,217,1) 75%, rgba(95,156,217,1) 87.5%, rgba(94,190,227,1) 87.5%, rgba(94,190,227,1) 87.5%, rgba(94,190,227,1) 100%); /* W3C */ } 

 <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/> <hr class="colored" /> 

Answer 2

You can create a container with a width of 100% with 10 internal spacing, each of which is 10% of the total width. Then apply the background color that you like in each gap.

This way it will be liquid, and you can easily wrap it inside another container so that it fills its width and does not become 100% of the page.

Each range can be targeted by adding another class to each of them or, if you like, you can also use span: nth-child (1), span: nth-child (2), etc.

UPDATE

In fact, I am not getting upvote in Shaun Loftin's answer, since the background color applied to <hr> will only work on certain versions of Chrome. For example, now on Linux I don’t see hr coloring at all with background-color:red;

One great thing is that even inside the HTML5 Boilerplate, they used this code for the <hr> cross browser style:

 hr { display: block; height: 1px; border: 0; border-top: 1px solid red; margin: 1em 0; padding: 0; } 

Use this if you do not want to modify the HTML element:

DEMO with hr element http://jsfiddle.net/a_incarnati/gna7r4L8/83/

OTHERWISE , you can emulate hr with another element. It depends on you.

 span { display:block; width:10%; float:left; height:5px;} .line{ width:100%; } .color-1{ background:green; } .color-2{ background:yellow; } .color-3{ background:purple; } .color-4{ background:red; } .color-5{ background:orange; } .color-6{ background:lightgreen; } .color-7{ background:gold; } .color-8{ background:brown; } .color-9{ background:lightblue; } .color-10{ background:lightgrey; } 

 <div class="line"> <span class="color-1"></span> <span class="color-2"></span> <span class="color-3"></span> <span class="color-4"></span> <span class="color-5"></span> <span class="color-6"></span> <span class="color-7"></span> <span class="color-8"></span> <span class="color-9"></span> <span class="color-10"></span> </div> 

Answer 3

If I were you, I would create a few hours and assign them a wrapper so that they all fit together. You can give each hr a different identifier, and then call them using HTML. Then, using CSS, assign them every different background color.

For instance:

HTML:

<hr id="red"><hr id="blue">

CSS

 #red {background-color:red;} #blue {background-color:blue;} 

Fiddle

---

You can also embed them in a string with HTML without an external stylesheet. It will look something like this:

HTML:

<hr style="background-color:red"><hr style="background-color:blue">

Fiddle

---

I kind of did something like that, checking out this fiddle I did some time ago, which may relate to what you are watching. Hope this helps!

Answer 4

you can create your <hr> background using a linear gradient. try it

 hr { border: 0; height: 1px; background: linear-gradient(to right, red, yellow, green); } 

see here in action http://jsfiddle.net/es49mmcb/1/