Generate arrow line with CSS

Question

I am trying to generate a straight horizontal line with a breakdown in the middle to display an arrow. The idea is that the content displayed under the line will provide details about the content displayed above the line. Here is what the line should look like:

I am trying to generate this with pure HTML and CSS (no bitmap images). Use of Font Awesome is acceptable if it ends up producing the right result. I need control over the line's thickness and color. The angle of the breakdown does not matter (45 and 90 degrees on the sample shown above). I am aware of this CSS triangle trick, but I can't think of a way to apply it to this scenario.

Solution 1

This nice effect can be achieved using the CSS :before and :after properties. It's best to play around with Simon Højberg's online generator at cssarrowplease.

Solution 2

A solution with a transparent arrow background, allowing you to use it with every background:

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

Live demo: http://jsfiddle.net/85saaphw/