Интересной возможностью CSS, при использовании границ, является содание треугольников при помощи CSS без использования картинок. 

 Принцип таков, что четыре CSS границы элемента берут свое начало с центра, когда размер элемента имеет значение 0, четыре границы соприкасаются друг с другом, создавая четыре треугольника.

 Размер треугольника зависит от толщины границы.

Для создания разных углов, необходимо варьировать толщиной границ.

Стили:

#triangles{
margin:3em;
width:0;
height:0;
border-color: red blue green yellow; /*Сверху, справа, снизу, слева*/
border-style: solid;
border-width: 50px; /*ширина границы*/ }
Выводим трегольники:
<div id="triangles"></div>

Для отображения только нужного треугольника, вы должны установить цвет границы (border-color) всех сторон, кроме нужной стороны границы в прозрачный.

Следующий пример показывает вывод подсказки с указателем в виде треугольника посредством CSS и DIV

Демо:

CSS:

<style type="text/css">

<style>

.uparrowdiv, .downarrowdiv, .leftarrowdiv, .rightarrowdiv{
width:600px;
min-height:40px; /*минимальная высота DIV, не менее две ширины стрелки*/
background: black;
color:white;
padding:5px;
position:relative;
word-wrap:break-word;
-moz-border-radius:5px; /*Огругляем углы при помощи CSS3*/
-webkit-border-radius:5px;
border-radius:5px;
margin-bottom:2em;
}

.uparrowdiv:after{ /*Добавление стрелки к uparrowdiv DIV*/
content:'';
display:block;
position:absolute;
top:-20px; /*должно быть -border-width x 2 */
left:30px;
width:0;
height:0;
border-color: transparent transparent black transparent; /*цвет границы должен быть тем же самым как цвет фона div*/
border-style: solid;
border-width: 10px;

}

.downarrowdiv:after{ /*Добавление стрелки к downarrowdiv DIV*/
content:'';
display:block;
position:absolute;
top:100%; /*Установить 100% */
left:30px;
width:0;
height:0;
border-color: black transparent transparent transparent; /*цвет границы должен быть тем же самым как цвет фона div*/
border-style: solid;
border-width: 10px;
}

.leftarrowdiv:after{ /*Добавление стрелки leftarrowdiv DIV*/
content:'';
display:block;
position:absolute;
top:10px;
left:-20px; /*должно быть -border-width x 2 */
width:0;
height:0;
border-color: transparent black transparent transparent; /*цвет границы должен быть тем же самым как цвет фона div*/
border-style: solid;
border-width: 10px;
}

.rightarrowdiv:after{ /*Добавление стрелки rightarrowdiv DIV*/
content:'';
display:block;
position:absolute;
top:10px;
left:100%; /*Установить 100% */
width:0;
height:0;
border-color: transparent transparent transparent black; /*цвет границы должен быть тем же самым как цвет фона div*/
border-style: solid;
border-width: 10px;
}

</style>

HTML:

<div class="uparrowdiv">Вывод треугольника сверху посредством CSS</div>
<div class="downarrowdiv">Вывод треугольника снизу посредством CSS</div>
<div class="leftarrowdiv">Вывод треугольника слева посредством CSS</div>
<div class="rightarrowdiv">Вывод треугольника справа посредством CSS</div>