Please find this css class to create simple uparrow downarrow left arrow and right arrow.
<html>
<style>
.left {border-bottom: 10px solid transparent;
border-right: 10px solid red;
border-top: 9px solid transparent;
float: left;}
.right {border-bottom: 10px solid transparent;
border-left: 10px solid red;
border-top: 9px solid transparent;
float: left;}
.top{ border-color: black transparent transparent;
border-style: solid;
border-width: 11px 7px 10px;
float: left;}
.bottom {border-color: transparent transparent black !important;
border-style: solid;
border-width: 0 27px 19px 25px;
float: right;}
</style>
<div class="left"></div>
<div class="right"></div>
<div class="top"></div>
<div class="bottom"></div>
</html>
Class left means Leftward arrow.,
Any one please suggest me the better way of creating arrows using simple css
css tricks may be browser/version limited.
You can also get icon images here:
http://www.iconarchive.com/search?q=arrow+up
Small ones here:
http://p.yusukekamiyamane.com/icons/search/fugue/#keyword=arrow