How to create CSS triangles or arrow heads

CSS triangles (arrow heads) in various directions (up, down, left, right) can be created using a combination of thick CSS borders (visible and transparent) on a 0 size div element. Follow the following steps to create triangles using CSS.

1. First we’ll create a 0 width/height div with thick borders of different colors. This way it will be easier to visualize that we can take a combination of these 4 borders and create desired triangle.
   

   <style type="text/css" media="screen">
   .onlyborders {
     width:0; height:0;
     border-top: 30px solid red;
     border-right: 30px solid blue;
     border-bottom: 30px solid green;
     border-left: 30px solid orange;
   }
   </style>
   
   <p>All 4 borders present</p>
   <div class="onlyborders"></div>

   refresh done

   try it online

2. Now create a 0 width/height div with three borders (left, right and bottom). This will also help us visualize how borders appear when only three of them are present.
   

   <p>Only left, right and bottom borders present</p>
   <style type="text/css" media="screen">
   .onlyborders {
     width:0; height:0;
     border-right: 30px solid blue;
     border-bottom: 30px solid green;
     border-left: 30px solid orange;
   }
   </style>
   
   <div class="onlyborders"></div>

   refresh done

   try it online

3. To create a triangle (say pointing up), we need to have bottom border visible and left and right border transparent. Similarly we can create other triangles.
   

   <style type="text/css" media="screen">
   .up {
     width:0; height:0;
     border-bottom: 30px solid green;
     border-right: 30px solid transparent;
     border-left: 30px solid transparent;
   }
   .down {
     width:0; height:0;
     border-top: 30px solid green;
     border-right: 30px solid transparent;
     border-left: 30px solid transparent;
   }
   .left {
     width:0; height:0;
     border-right: 30px solid green;
     border-top: 30px solid transparent;
     border-bottom: 30px solid transparent;
   }
   .right {
     width:0; height:0;
     border-left: 30px solid green;
     border-top: 30px solid transparent;
     border-bottom: 30px solid transparent;
   }
   </style>
   up<div class="up"></div><hr/>
   down<div class="down"></div><hr/>
   left<div class="left"></div><hr/>
   right<div class="right"></div><hr/>

   refresh done

   try it online