Beginner: Create Triangles with pure CSS.

So Hi everyone, Like I said I'm going to start off with CSS triangles, here I am.

HTML :

<div class="arrow-up"></div>
<div class="arrow-down"></div>
<div class="arrow-left"></div>
<div class="arrow-right"></div>

CSS

So the basic principle is a div with 0 height and width, so what will be our arrows? The border. The actual width and height of the arrow will be determined by the width of the border. In an bottom arrow, let's say,
the border-top has color while the left and right borders are transparent, which makes up our Triangle.

.arrow-up{
    width:0;
    height:0;

   /* The transparent Borders*/
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;

   /*The actual colored border which will form the triangle*/
   border-bottom: 10px solid red;
}

.arrow-down{
    width:0;
    height:0;

   /* The transparent Borders*/
    border-left: 21px solid transparent;
    border-right: 21px solid transparent;

    /*The actual colored border which will form the triangle*/
   border-top: 21px solid green;
}
.arrow-left{
    width:0;
    height:0;

   /* The transparent Borders*/
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;

    /*The actual colored border which will form the triangle*/
   border-left: 5px solid black;
}

.arrow-right{
    width:0;
    height:0;

   /* The transparent Borders*/
    border-top: 40px solid transparent;
    border-bottom: 40px solid transparent;

    /*The actual colored border which will form the triangle*/
   border-right: 40px solid white;
}



Examples: