使用CSS生成箭头线

Question

我正在尝试生成一条直线水平线，中间有一个击穿以显示箭头。我们的想法是，该行下显示的内容将提供有关该行上方显示内容的详细信息。以下是该行应该是什么样的：

我试图用纯HTML和CSS（没有位图图像）生成它。如果Font Awesome最终产生正确的结果，则可以使用CSS triangle trick。我需要控制线条的粗细和颜色。击穿角度无关紧要（上图所示样品为45度和90度）。我知道这个{{3}}，但我想不出将其应用到这种情况的方法。

Answer 1

使用CSS :before和:after属性可以实现这种不错的效果。最好在cssarrowplease与SimonHøjberg的在线生成器一起玩。

Answer 2

具有透明箭头背景的解决方案，允许您在每个背景中使用它：

<强> HTML：

<div class="line-separator">
    <div class="side-line"> </div>
    <div class="triangle"> </div>
    <div class="side-line"> </div>
</div>

<强> CSS：

.side-line {
    display: inline-block;
    border-top: 1px solid black;
    width: 20%;
}

.triangle {
    display: inline-block;
    height: 7px;
    width: 7px;
    transform: rotate(45deg);
    transform-origin: center center;
    border-top: 1px solid black;
    border-left: 1px solid black;
    margin: 0 -3px -3px;
}

现场演示 http://jsfiddle.net/85saaphw/