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

Answer 2

.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/

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

2 个答案: