Genera la linea della freccia con il CSS

Question

Sto provando a generare una linea orizzontale diritta con un'analisi al centro per visualizzare una freccia. L'idea è che il contenuto visualizzato sotto la linea fornirà dettagli sul contenuto visualizzato sopra la linea. Ecco ciò che la linea dovrebbe essere simile:

Sto cercando di generare questo con puro HTML e CSS (nessun immagini bitmap). L'uso di Font Awesome è accettabile se finisce per produrre il risultato giusto. Ho bisogno di controllare lo spessore e il colore della linea. L'angolo della ripartizione non ha importanza (45 e 90 gradi nell'esempio mostrato sopra). Sono a conoscenza di questo CSS triangle trick, ma non riesco a pensare a un modo per applicarlo a questo scenario.

Answer 1

Questo bel effetto può essere ottenuto utilizzando le proprietà CSS :before e . È meglio giocare con il generatore online di Simon Højberg allo cssarrowplease.

Answer 2

una soluzione con una freccia sfondo trasparente, che consente di utilizzare con ogni fondo:

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; 
} 

Demo online : http://jsfiddle.net/85saaphw/