<hr>帶箭頭的行之間指向css

-9

hr或div行之間的向上箭頭。與此類似（Down arrow）<hr>帶箭頭的行之間指向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: 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>

來源

2017-08-01 Ashokkumar V

呃...你有什麼問題嗎？ –

你的問題是什麼？你的代碼在哪裏， – smzapp

你到目前爲止嘗試過什麼？ – Senthe

這裏是你提供的，用箭頭朝上，而不是下降的例子的修改版本。希望這可以幫助。

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>

來源

2017-08-01 08:19:23 Mastrianni

請不要鼓勵他通過給他一個答案來提出類似的問題。 –

<hr>帶箭頭的行之間指向css

回答

相關問題