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/