CSS箭頭（使用：之後）在Firefox和Chrome中看起來不同

Question

我正在使用CSS製作向下箭頭。這是https://jsfiddle.net/15zxupy9/和CSS：

.btndown{ 
    height:40px; 
    width: 30px; 
    margin: 0 auto; 
    color:#ffffff; 
    background-color:#007bff; 
    position:relative; 
    display:block; 
    clear: both; 
} 
.btndown:after{ 
    position:relative; 
    bottom:-60px; 
    left:-15px; 
    content:" "; 
    width: 0px; 
    height: 0px; 
    border-style: solid; 
    border-width: 30px 30px 0px 30px; 
    border-color: #007bff transparent transparent transparent; 
} 

這個箭頭看起來很好，在Firefox，但在Chrome中箭頭只出現一半。任何人都可以幫我弄清楚爲什麼？

Answer 1

.btndown{ 
 
    height:40px; 
 
    width: 30px; 
 
    margin: 0 auto; 
 
    color:#ffffff; 
 
    background-color:#007bff; 
 
    position:relative; 
 
    display:block; 
 
    clear: both; 
 

 
} 
 
.btndown:after{ 
 
    position:absolute; 
 
    bottom:-30px; 
 
    left: -15px; 
 
    right: 0; 
 
    margin: auto; 
 
    content:" "; 
 
    width: 0px; 
 
    height: 0px; 
 
    border-style: solid; 
 
    border-width: 30px 30px 0px 30px; 
 
    border-color: #007bff transparent transparent transparent; 
 
}

<div class="btndown"> 
 

 
</div>

Check It Out The fiddle Postion .btndown:after..... 

https://jsfiddle.net/kumarrishikesh12/15zxupy9/4/

Answer 2

你可以做這樣的事情。

.btndown{ 
    height:40px; 
    width: 30px; 
    margin: 0 auto; 
    color:#ffffff; 
    background-color:#007bff; 
    position:relative; 
    display:block; 
    clear: both; 
    position: relative; 
} 
.btndown:after{ 
    position:absolute; 
    bottom:-30px; 
    left: -15px; 
    right: 0; 
    margin: auto; 
    content:" "; 
    width: 0px; 
    height: 0px; 
    border-style: solid; 
    border-width: 30px 30px 0px 30px; 
    border-color: #007bff transparent transparent transparent; 
}