产生箭头符合CSS [复制](Generate arrow line with CSS [dupli

这个问题已经在这里有一个答案：

• 边界用透明居中箭头 3个答案

我想产生在中间显示一个箭头崩溃一条水平直线。 这个想法是，线下显示的内容将提供有关线以上显示的内容的细节。 这是该行应该是什么样子：

我试图用纯HTML和CSS（无位图图像）生成此。 使用字体真棒是可以接受的，如果它最终产生正确的结果。 我需要过线的粗细和颜色控制。 破裂的角度并不重要（45度和90度以上所示的样品）。 我知道这样的CSS三角形把戏 ，但我不能想办法把它应用到这种情况。

Answer 1:

可以使用CSS来实现这一不错的效果:before和:after性能。 这是最好的玩弄西蒙Højberg的网络在发电机cssarrowplease 。

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/

文章来源: Generate arrow line with CSS [duplicate]