Arrow using css

Why use image, when you can create arrow with/without borders by using CSS
Below is the CSS code that helps you to create a triangle arrow

CSS

.arw-up {
  width:0; 
  height:0; 
  border-left:10px solid transparent;
  border-right:10px solid transparent;
  border-bottom:10px solid black;
}

.arw-down{
  width:0; 
  height:0; 
  border-left:20px solid transparent;
  border-right:20px solid transparent;
  border-top:20px solid #f00;
}
.arw-left {
  width:0; 
  height:0; 
  border-top:10px solid transparent;
  border-bottom:10px solid transparent;  
  border-right:10px solid blue; 
}
.arw-right{
  width:0; 
  height:0; 
  border-top:20px solid transparent;
  border-bottom:20px solid transparent;
  border-left: 20px solid #FCD000;
}

You can use any block level elements or even psuedo elements like before and after to create the arrows; it’s up to you.

Demo

See the Pen CSS arrow by idevelopweb.site (@webstuff) on CodePen.0

Some tweaks:
There are some tweaks where you can use a single arrow &  CSS rotate property to create the different directions of the arrow by just changing the degree in rotate property

.down{
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform:rotate(90deg);
/*change the degree according to your need*/
}

Arrow with borders:
Even you can add border around it by using pseudo elements like before/after and by absolute positioning around the arrow.

/*arrow with borders*/
.brd{position:relative;}
.brd:before{content: '';
display: block;
position: absolute;
top: -34px;
right:-15px;
width: 29px;
height: 28px; 
background: transaprent;
border-right:1px solid #000;
border-bottom:1px solid #000;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);  
transform:rotate(45deg)
 }