Верстаем треугольники

Благодаря CSS3 и border-radius мы теперь можем верстать окружности, а что насчёт треугольников? Частенько в дизайне встречается какая нибудю мелочь, навроде этой ▲ маленькой штуки, которая при сортировке данных подсказывает пользователю каким образом они выведены: от большего значения к меньшему или наоборот.

Можно, конечно, воспользоваться таблицей специальных символов HTML. В ней присутствует символ треугольника, который записывается в виде десятичного кода:
▲ ▲
▼ ▼
◄ ◄
► ►

Так, кстати, сделано на Яндекс.Маркет в сортировке результатов. Но в этом способе мы несколько ограничены в стилях, единственное, чем мы сможем управлять — это цветом и размером треугольника, указав размер шрифта.

Есть ещё один способ, который позволит нам создавать треугольники с разными углами: равносторонний, равнобедренный, в принципе, любой. К тому же, мы вообще можем изменить «направление» треугольника. Этот способ предпологает создание блока с нулевой высотой и шириной. Вид же треугольника задаётся с помощью рамки (border). Изменяя параметры рамки мы будем задавать нужный вид треугольника.

Вот пример кода для равностороннего треугольника «вверх»

.up { 
height: 0; 
width: 0; 
border-bottom: 30px solid #000; 
border-right: 30px solid transparent; 
border-left: 30px solid transparent;}

А вот для равнобедренного «вправо»

.right {
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 50px solid #AF0707; }

А этот вообще направлен вниз и влево

.corner {
width: 0;
height: 0;
border-right: 50px solid transparent;
border-top: 50px solid transparent;
border-left: 50px solid green; }

Вообщем, сама идея, думаю, понятна. Пробуем, экспериментируем, внедряем!

Смотреть пример