Clever Geek Handbook

HR with two colors

I am trying to make an hr with two colors on it, one dark red at the bottom and one orange on top. An image is attached which gives an example of what I am trying to do. Is there a way to do this using pure CSS?

enter image description here

EDIT: If not, is there a way to set hr as an image? How is png? Something that will stretch for different sizes?

+3


source to share


4 answers


Use CSS with two borders:

hr {
     border-top: 1px solid gray;
     border-bottom: 1px solid white;
}


An example at JSFiddle .

And to simulate what you have in the picture with text floating on top of HR, you can do something like this JSFiddle .

+12


source


Another solution might just be using a CSS gradient. For example:



hr {
    border: 0;
    height: 1px;
    background: #1e5799;
    background: linear-gradient(to right,  #1e5799 50%,#7db9e8 50%);
}
+2


source


so if i understand correctly .. u want one hour .. 1px height blue and another 1px height red sitting on top of each other. u can do it with pure css using pseudo-classes.

hr{
position:relative;
height:1px;
background-color:red;
}
hr:before {
position:absolute;
content : ' ';
left:0;
right:0;
height:1px;
top:-1px;
background-color:blue;
}
0


source


You don't need to use hr

only one Div with Pseudo-elements for example:

:root {
    background-color: red;
    text-align: center
}
:root:hover {
    background-color: orange;
}
div {
    position: relative;
    width: 40px;
    display: inline-block;
    font-style: italic
}

div:before, div:after{
    content: '';
    position: absolute;
    width: 100px;
    height: 1px;
    background: black;
    top: 50%;
    border-radius: 4px;
    box-shadow: 0 1px 1px white;
}
div:before{
    left: -100px;
}
div:after{
    right: -100px;
}
      

        
        
        
      

    
<div>or</div>
Run codeHide result


0


source






More articles:


All Articles