I need to style a horizontal line <hr> like the picture attached. Is there any way to do this with pure css that would also work in IE8?
-
Please post the code you've tried already.j08691– j086912015-04-03 16:46:01 +00:00Commented Apr 3, 2015 at 16:46
Add a comment
|
1 Answer
EDIT: Sorry, I missed your IE8 requirement...this probably won't work there. I apologize. I don't have access to it to check.
You can use the :before and create a box, rotate it, apply some border, absolutely position it and voila, there you have it:
http://jsfiddle.net/v7y1bp9s/1/
HTML:
<div class="container">
<hr class="line"></hr>
</div>
CSS:
.container {
float: left;
width: 100%;
height: 50px;
background-color: #1978a4;
line-height: 50px;
}
hr.line {
border-color: #fff;
position: relative;
}
hr.line:before {
content: '';
height: 10px;
width: 10px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
position: absolute;
left: 50px;
border-bottom: 1px solid #fff;
border-right: 1px solid #fff;
background-color: #1978a4;
top: -5px;
}
2 Comments
ChaniLastnamé
The background should be transparent. I just attached a screenshot of the mockup. So when I removed the bg color it is like this: jsfiddle.net/v7y1bp9s/2 Any chance of getting the shape properly?
Matt Whiteley
As far as I know there is no way to make that shape that allows you to add the borders like you need. Also, it can't be a transparent background, the color of the shape is needed to cover that small part of the <hr> to make it appear how it did in my fiddle. Making it transparent simply exposes the <hr> and defeats the purpose.