<hr>带箭头的行之间指向css

Question

hr或div行之间的向上箭头。与此类似（Down arrow）

我试过了。看起来我无法将箭头移动到正确位置。

我的代码：

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: 5px; 
 
    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: 4px; 
 
    left: 50%; 
 
}

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

Answer 1

这里是你提供的，用箭头朝上，而不是下降的例子的修改版本。希望这可以帮助。

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>