我试图画一条带有向下箭头的小线,就像附图中所示。
我使用伪元素 before 和 after 将其在 fiddle 上实现了(参考 Stack Overflow 的帮助)。
<hr class="line">
http://jsfiddle.net/4eL39sm1/6/
但是我现在需要将它放在 div 标签中,像这样:
<div class="hr"></div>
我已经相应地编辑了我的CSS。
div.hr{
width:70%;
}
div.hr:after {
content:'';
position: absolute;
border-style: solid;
border-width: 15px 15px 0;
border-color: #FFFFFF transparent;
display: block;
width: 0;
z-index: 1;
top: 8px;
left: 45%;
}
div.hr:before {
content:'';
position: absolute;
border-style: solid;
border-width: 15px 15px 0;
border-color: #7F7F7F transparent;
display: block;
width: 0;
z-index: 1;
top: 9px;
left: 45%;
}
我看到了两个问题:
- 箭头部分看起来像一个实心三角形。
- 箭头(三角形)位置错了,位于顶部。我从CSS中删除了顶部值后,对齐得很好,但仍然看起来像一个三角形。
谢谢。