CSS-треугольник

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

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

Надо заметить, что "треугольник" это обычный div, специальный образом стилизованный. Для реализации тултипов нам понадобятся четыре треугольника, поскольку, в зависимости от расположения исходного элемента на странице, тултип может находится, сверху, снизу, слева или справа от него.

<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;
}

Результат будет выглядеть примерно вот так(для наглядности, я немного увеличил картинку):


Как видно по картинке, треугольники оказались не равносторонними. Зачастую это не является проблемой, но если все же нужно, чтоб они были такими, ширина видимой части должна быть равна 173% прозрачных частей, то есть для треугольника направленного вниз:

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