CSS箭头（使用：after）在Firefox和Chrome中看起来不同

我正在使用CSS制作一个向下箭头。这是它和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中，箭头只显示了一半。谁能帮我找出原因吗？

你可以这样做

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

.btndown{
高度：40px；
宽度：30px；
保证金：0自动；
颜色：#ffffff；
背景色：#007bff；
位置：相对位置；
显示：块；
明确：两者皆有；
}
.btndown:之后{
位置：绝对位置；
底部：-30px；
左：-15px；
右：0；
保证金：自动；
内容：“；
宽度：0px；
高度：0px；
边框样式：实心；
边框宽度：30px 30px 0px 30px；
边框颜色：#007bff透明；
}

---

在完成后查看小提琴位置。