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; 
}