Html <；人力资源>；中间有一个向下箭头的直线

我试图用一个小箭头画一条线，箭头指向下方，如图所示

我能够让它在小提琴上使用前后psuedo标签（使用）

我提出了以下两个意见：

箭头部分看起来是一个实心三角形

箭头（三角形计算错误，在顶部向上）。我删除了顶级值表单css，它对齐得很好，但看起来仍然像一个三角形

有没有办法解决这个问题

---

谢谢。

您可以对此进行修改：

div.hr{
宽度：70%；
高度：1px；
背景#7F7F7F；
}
人事部：之后{
内容：''；
位置：绝对位置；
边框样式：实心；
边框宽度：15px 15px 0；
边框颜色：#FFFFFF透明；
显示：块；
宽度：0；
z指数：1；
顶部：8px；
左：35%；
}
人事部：以前{
内容：''；
位置：绝对位置；
边框样式：实心；
边框宽度：15px 15px 0；
边框颜色：#7F7F7F透明；
显示：块；
宽度：0；
z指数：1；
顶部：9px；
左：35%；
}

---

你们想要这样的东西吗？谢谢，你们两个！：）让我感到困惑的是，它在fiddl eb中工作得很好，但我在我的页面中也面临同样的问题。我检查了元素，前后CSS值都是一样的。还有其他方法吗？请描述一下你想实现什么，为什么这种方法不适合你？我理解。我正在寻找一种不用psuedo元素而以普通HTML和CSS呈现图像的方法。无论如何，谢谢你的帮助！：）这太棒了！谢谢分享。

<hr class="line">

<div class="hr"></div>

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