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.
Useful links:
Like it? Share it!
