html - <hr> line with a arrow in between pointing down

Question

I am trying to draw a line with a small arrow pointing down as in the image attached.

I was able to get it working on fiddle using before and after psuedo tags ( with help from Stack overflow).

<hr class="line">

http://jsfiddle.net/4eL39sm1/6/

But I now need it in a div tag like this

<div class="hr"></div>

I have edited my css accordingly

div.hr{
width:70%;
}

div.hr:after {
content:'';
position: absolute;
border-style: solid;
border-width: 15px 15px 0;
border-color: #FFFFFF transparent;
display: block;
width: 0;
z-index: 1;
top: 8px;
left: 45%;
}

div.hr:before {
content:'';
position: absolute;
border-style: solid;
border-width: 15px 15px 0;
border-color: #7F7F7F transparent;
display: block;
width: 0;
z-index: 1;
top: 9px;
left: 45%;
}

I made these 2 observations:

1. The arrow part looks a solid triangle.
2. The arrow (triangle was mispalced was up in the top). I removed the top value form css and it aligned well but it still looks like a triangle.

Is there a way I can fix this?

Thanks.

Answer 1

You can modify to this:

div.hr {
    width:70%;
    height: 1px;
    background: #7F7F7F;
}
div.hr:after {
    content:'';
    position: absolute;
    border-style: solid;
    border-width: 15px 15px 0;
    border-color: #FFFFFF transparent;
    display: block;
    width: 0;
    z-index: 1;
    top: 8px;
    left: 35%;
}
div.hr:before {
    content:'';
    position: absolute;
    border-style: solid;
    border-width: 15px 15px 0;
    border-color: #7F7F7F transparent;
    display: block;
    width: 0;
    z-index: 1;
    top: 9px;
    left: 35%;
}

<div class="hr"></div>