Already using font-awesome library or the bootstrap framework and in need of some arrows for flow charts? Check out the code below:
.arrow_right, .arrow_left, .arrow_right_left{border-width:1px 0 0 0; width:100px; height:1px;}
.arrow_top, .arrow_bottom, .arrow_top_bottom{border-width:0 0 0 1px; width:1px; height:100px; }
.arrow_right, .arrow_left, .arrow_right_left, .arrow_top, .arrow_bottom, .arrow_top_bottom{border-color: #c00; border-style:solid; position:relative; z-index:10;}
Assuming you are using font-awesome and already have it included in your css
.arrow_right:before, .arrow_left:before, .arrow_right_left:before, .arrow_right_left:after, .arrow_top:before, .arrow_bottom:before, .arrow_top_bottom:after, .arrow_top_bottom:before{color:#000; font-family: "FontAwesome"; font-size: 16px; position: absolute;}
.arrow_right:before, .arrow_right_left:before{content:"\f0da"; top: -11px; right: -2px;}
.arrow_left:before, .arrow_right_left:after{content:"\f0d9"; top: -11px; left: -2px;}
.arrow_top:before, .arrow_top_bottom:after{content:"\f0d8"; top: -9px; left: -5px;}
.arrow_bottom:before, .arrow_top_bottom:before{content:"\f0d7"; bottom: -9px; left: -5px;}
OR for bootstrap users include the following:
.arrow_right:before, .arrow_left:before, .arrow_right_left:before, .arrow_right_left:after, .arrow_top:before, .arrow_bottom:before, .arrow_top_bottom:after, .arrow_top_bottom:before{color:#c00; font-family: "Glyphicons Halflings"; font-size: 16px; position: absolute;}
.arrow_right:before, .arrow_right_left:before{content:"\e080"; top: -11px; right: -4px;}
.arrow_left:before, .arrow_right_left:after{content:"\e079"; top: -11px; left: -4px;}
.arrow_top:before, .arrow_top_bottom:after{content:"\e113"; top: -11px; left: -8px;}
.arrow_bottom:before, .arrow_top_bottom:before{content:"\e114"; bottom: -11px; left: -8px;}
The HTML markup
<h4>CSS arrow pointing right</h4> <div class="arrow_right"></div> <h4>CSS arrow pointing left</h4> <div class="arrow_left"></div> <h4>CSS arrow pointing left and right</h4> <div class="arrow_right_left"></div> <h4>CSS arrow pointing up</h4> <div class="arrow_top"></div> <h4>CSS arrow pointing down</h4> <div class="arrow_bottom"></div> <h4>CSS arrow pointing up and down</h4> <div class="arrow_top_bottom"></div>
You can of course use any other css font library that contains a triangular shape and adjust the content types and positioning accordingly.
Known Issues:
- In IE the positioning is a bit hit and miss.
- When using Glyphicons and rotation, IE seems to make the border of 1px disappear at 45 degrees.
If you spot anything else, please put them in the comments below.