Generiere Pfeillinie mit CSS

Question

Ich versuche, eine gerade horizontale Linie mit einem Durchbruch in der Mitte zu erzeugen, um einen Pfeil anzuzeigen. Die Idee ist, dass der Inhalt, der unter der Zeile angezeigt wird, Details über den über der Zeile angezeigten Inhalt enthält. Hier ist, was die Linie sollte wie folgt aussehen:

Ich versuche, dies mit reinen HTML und CSS zu erzeugen (keine Bitmap-Bilder). Die Verwendung von Font Awesome ist akzeptabel, wenn damit das richtige Ergebnis erzielt wird. Ich brauche Kontrolle über die Stärke und Farbe der Linie. Der Winkel des Zusammenbruchs spielt keine Rolle (45 und 90 Grad bei der oben gezeigten Probe). Ich bin mir dessen bewusst, CSS triangle trick, aber ich kann nicht eine Möglichkeit finden, es auf dieses Szenario anzuwenden.

Answer 1

Dieser schöne Effekt kann mit den Eigenschaften CSS :before und :after erreicht werden. Am besten spielt man mit Simon Højbergs Online-Generator unter cssarrowplease.

Answer 2

Eine Lösung mit einem transparenten Hintergrund Pfeil, so dass Sie es mit jedem Hintergrund verwenden:

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-left: -3px; 
    margin-right: -3px; 
    margin-bottom: -3px; 
} 

Live-Demo : http://jsfiddle.net/85saaphw/