Make triangle with CSS

First in HTML

in 1st group we will create triangle direction to summit, bottom, left and right and the 2nd is top-left, top-right, bottom-left and bottom-right.

 <p>First Group</p>
 <div class="triangles">
  <div class="triangle demo-arrow-up"></div>
  <div class="triangle demo-arrow-down"></div>
  <div class="triangle demo-arrow-left"></div>
  <div class="triangle demo-arrow-right"></div>
 </div>
 
 <p>Second Group</p>
 <div class="triangles">
  <div class="triangle demo-topleft"></div>
  <div class="triangle demo-topright"></div>
  <div class="triangle demo-bottomleft"></div>
  <div class="triangle demo-bottomright"></div>
 </div>

and the CSS is like :

/* Triangles
----------------------------*/
.triangles{
 overflow: hidden;
 padding: 20px;
 margin: 20px;
 border: 2px solid #000;
}
 .triangle{
  margin:10px;
  float: left;
 }
  
  /* First Group */
  .demo-arrow-up{
   width: 0; 
   height: 0; 

   border-left: 50px solid transparent;
   border-right: 50px solid transparent;
   
   border-bottom: 50px solid #000;
  }

  .demo-arrow-down{
   width: 0; 
   height: 0; 
   
   border-left: 50px solid transparent;
   border-right: 50px solid transparent;
   
   border-top: 50px solid #333;
  }

  .demo-arrow-right{
   width: 0; 
   height: 0; 
   
   border-top: 50px solid transparent;
   border-bottom: 50px solid transparent;
   
   border-left: 50px solid #ff0;
  }

  .demo-arrow-left{
   width: 0; 
   height: 0; 
   
   border-top: 50px solid transparent;
   border-bottom: 50px solid transparent; 
   
   border-right:50px solid #f0f; 
  }

  /* Second Group */

  .demo-topleft{
   width: 0; 
   height: 0; 
   
   border-top: 50px solid #333; 
   border-right: 50px solid transparent;
  }

  .demo-topright{
   width: 0; 
   height: 0; 
   
   border-top: 50px solid #333; 
   border-left: 50px solid transparent;
  }
  .demo-bottomleft{
   width: 0; 
   height: 0; 
   
   border-bottom: 50px solid #333; 
   border-right: 50px solid transparent;
  }
  .demo-bottomright{
   width: 0; 
   height: 0; 
   
   border-bottom: 50px solid #333; 
   border-left: 50px solid transparent;
  }

You can see on the CSS we only playing with border-top,border-left, border-right and border-bottom and the result for the demo like.
First Group

Second Group