How to generate Arrows using pure css without images

Its very simple to generate arrows using pure css and html alone without using any images. Use the following code as markup.

<div class="arrow-up"></div>

<div class="arrow-down"></div>

<div class="arrow-left"></div>

<div class="arrow-right"></div>

Now use the following css and you are done!!!

.arrow-up {

       width: 0;

       height: 0;

       border-left: 10px solid transparent;

       border-right: 10px solid transparent;      

       border-bottom: 10px solid black;

}

.arrow-down {

       width: 0;

       height: 0;

       border-left: 10px solid transparent;

       border-right: 10px solid transparent;

       border-top: 10px solid #f00;

}

.arrow-right {

       width: 0;

       height: 0;

       border-top: 20px solid transparent;

       border-bottom: 20px solid transparent;

       border-left: 20px solid green;

}

.arrow-left {

       width: 0;

       height: 0;

       border-top: 20px solid transparent;

       border-bottom: 20px solid transparent;

       border-right:20px solid blue;

}