title: Generate arrow line with CSS
body: <p>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:</p>
  
  <p><img src="https://i.stack.imgur.com/QvL6S.png" alt="enter image description here"></p>
  
  <p>I am trying to generate this with pure HTML and CSS (no bitmap images). Use of <a href="http://fortawesome.github.com/Font-Awesome/" rel="nofollow noreferrer">Font Awesome</a> 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 <a href="http://css-tricks.com/snippets/css/css-triangle/" rel="nofollow noreferrer">CSS triangle trick</a>, but I can't think of a way to apply it to this scenario.</p>