带有向下箭头的HTML行

Question

我试图绘制一条带有向下箭头的小线，就像附图中的图像。

我一直无法得到向下的箭头。是否可以使用HTML和CSS来实现？

HTML

  <hr class="line">

CSS

.line{
width:70%;
color:red;
}

http://jsfiddle.net/4eL39sm1/

谢谢。

- user3861559

---

这是相当糟糕的尝试，换句话说，你要求别人为你做肮脏的工作...请看这里，最后一个例子：http://css-tricks.com/examples/hrs/ - Liam J

Answer 1

你可以使用伪元素:after和:before：

.line {
    width:70%;
}
.line:after {
    content:'';
    position: absolute;
    border-style: solid;
    border-width: 7px 7px 0;
    border-color: #FFFFFF transparent;
    display: block;
    width: 0;
    z-index: 1;
    top: 8px;
    left: 45%;
}
.line:before {
    content:'';
    position: absolute;
    border-style: solid;
    border-width: 7px 7px 0;
    border-color: #7F7F7F transparent;
    display: block;
    width: 0;
    z-index: 1;
    top: 9px;
    left: 45%;
}

<hr class="line">

您可以通过调整 border-width 的值来适应您的需求。

- Alex Char

---

我不会感到惊讶，如果这在当代的网络浏览器上停止工作，因为<hr>是一个不包含任何内容的空元素。仅仅因为它现在可以工作，并不意味着它将来也能够工作。 - Mimi

说实话，我不明白你这条评论的意图是什么。 - Alex Char

我的意思是最好不要将::after/::before伪元素应用于空的<hr>标签。如果浏览器目前支持它，我会说那是一个bug。 - Mimi

嗨，Alex，感谢你的帮助。那个很好用。我不是在质疑你的解决方案，只是想了解它是如何工作的。你提供的CSS中哪一部分渲染了向下箭头？ - user3861559

正如我所说，伪元素after和before起了作用。我使用这两个伪元素创建了两个三角形。一个是白色的，另一个是灰色的（用于边框）。在这里也可以看一下after和before。 - Alex Char