[Solved] line with a arrow in between pointing up in css

by


Here is a modified version of the example you provided, with the arrow pointing up, rather than down. Hope this helps.

DEMO: Codepen

CSS:

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

HTML:

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

0

solved

line with a arrow in between pointing up in css