How to make a CSS based triangle?

In many site you might have seen something like this:

 

 

 

 

 

 

So how do they achieve this? There are couple of ways, a simple way could be via the use of image and other way it could be the use of CSS.
Here is the snippet of code which can help you achieve this:
You can make them with a single div.

If you need Arrow to be in UP direction then use:

.arrowup {
  width: 0; 
  height: 0; 
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid black;
}

If you need Arrow to be in DOWN direction then use (this is the case for above image):

.arrowdown {
  width: 0; 
  height: 0; 
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 20px solid #f00;
}

If you need Arrow to be in RIGHT direction then use:

.arrowright {
  width: 0; 
  height: 0; 
  border-top: 60px solid transparent;
  border-bottom: 60px solid transparent;
  border-left: 60px solid green;
}

If you need Arrow to be in LEFT direction then use:

.arrowleft {
  width: 0; 
  height: 0; 
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent; 
  border-right:10px solid blue; 
}

If you have a better way, please use comments to share with us.