html - 使用 CSS 生成箭头线

Question

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

我正在尝试使用纯 HTML 和 CSS（无位图图像）生成它。如果最终产生正确的结果，使用Font Awesome是可以接受的。我需要控制线条的粗细和颜色。击穿的角度无关紧要（上图示例中的 45 度和 90 度）。我知道这个CSS 三角形技巧，但我想不出将它应用到这种情况的方法。

Answer 1

这个漂亮的效果可以使用 CSS:before和:after属性来实现。最好在cssarrowplease使用 Simon Hø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/