Generate arrow line with CSS

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.

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/