CSS Triangles

You can make them with a single div. It's nice to have classes for each direction possibility. 

HTML:
<div class="triangle-up"></div>
<div class="triangle-down"></div>
<div class="triangle-left"></div>
<div class="triangle-right"></div>

CSS:
.triangle-up {

            width: 0;

            height: 0;

            border-left: 50px solid transparent;

            border-right: 50px solid transparent;

            border-bottom: 50px solid black;

}

.triangle-down {

            width: 0;

            height: 0;

            border-left: 50px solid transparent;

            border-right: 50px solid transparent;

            border-top: 50px solid #f00;

}

.triangle-right {

            width: 0;

            height: 0;

            border-top: 50px solid transparent;

            border-bottom: 50px solid transparent;

            border-left: 50px solid green;

}

.triangle-left {

            width: 0;

            height: 0;

            border-top: 50px solid transparent;

            border-bottom: 50px solid transparent;

            border-right:50px solid blue;

}