
Вначале, я собирался использовать для этого один из существующих JavaScript-фреймворков, дабы не изобретать велосипеды. Однако, другие участники проекта не очень горели желанием включать в него целый фреймворк(к примеру, ExtJS) исключительно, для решения этой несложной задачи, потому было принято решение реализовать данную функциональность самим. Изучив, как этот "треугольник" создается в подобных фреймворках, я выяснил, что все они используют один и тот же CSS трюк. О нем и пойдет речь дальше.

<div class="left"></div>
<div class="up"></div>
<div class="right"></div>
<div class="down"></div>
А теперь собственно трюк: сам div имеет размеры 0x0, размеры же треугольника будут задаваться шириной его границы. Так, для треугольника направленного влево, правая граница будет иметь цвет, в то время, как верхняя и нижняя его границы будут прозрачными.
.left {
width: 0;
height: 0;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-right: 5px solid black;
}
.up {
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid red;
}
.right {
width: 0;
height: 0;
border-top: 7px solid transparent;
border-bottom: 7px solid transparent;
border-left: 7px solid green;
}
.down {
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid blue;
}
Результат будет выглядеть примерно вот так(для наглядности, я немного увеличил картинку):


.down {
width: 0;
height: 0;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-top: 173px solid black;
}