<hr>の間の矢印のある行は、CSSの

Question

時間を指すか、上の矢印のある行を上にしてください。これに似ています（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>