<分区>
css 箭头顶部不起作用
标签 css
我有一个 css 箭头顶部，我想在 div 的顶部显示，如下所示:
问题是，箭头在 div 内部...
这里有什么问题吗？
#news {
position:absolute;
min-width: 140px;
min-height:100px;
background: #fff;
color: #000;
border:1px solid #000;
}
#news:before {
content: "";
vertical-align: middle;
margin-left: 70px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid black;
}
最佳答案
您的定位代码有一点偏差。定位箭头伪元素的最佳方式(感谢 @vals)是使用 bottom: 100% 和 margin: auto, left: 0，和右:0。这样，即使您决定更改箭头的大小，您的箭头也将始终保持在正确的位置。
这是一个有效的现场演示:
#bellnews {
position: absolute;
min-width: 140px;
min-height: 100px;
background: #fff;
color: #000;
border: 1px solid #000;
}
#bellnews:before {
content: "";
vertical-align: middle;
margin: auto;
position: absolute;
left: 0;
right: 0;
bottom: 100%;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid black;
}<div id=bellnews>
</div>JSFiddle 版本:https://jsfiddle.net/3huzc74a/3/
关于css 箭头顶部不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35322257/