Приветствую вас на моем блоге. Как настроение? Я вот недавно вспомнил, как делается треугольник с помощью css. Вот думаю, может и вам рассказать 
Итак, это информация о том, как сделать в css3 треугольник.
Интересные возможности известных свойств
Все-таки для меня css остается интересной технологией потому, что в нем можно находить интересные решения даже с теми свойствами, которые, казалось бы, являются вполне обычными. Я сейчас говорю о свойстве border. Оно задает рамку элементу. Так вот, именно с его помощью мы сейчас и сотворим треугольник.
Треугольник с помощью рамки
Чтобы не морочиться с какими-то там классами и идентификаторами, я просто создам новый html-документ и создам в нем всего лишь один пустой блок.
<div></div>
Ну а самое интересное происходит в css. Посмотрите внимательно на этот код:
div {
width: 0;
height: 0;
border: 10px solid transparent; /* Прозрачность всем сторонам границы */
border-top: 10px solid green; /* Именно это добавляет треугольник */
}
Во-первых, указываем блоку нулевую ширину и высоту. Теперь происходит интересная вещь: если такому блоку с нулевыми размерами задать рамку, то она будет состоять из четырех треугольников. Но нам не нужны четыре, нам надо один, поэтому все стороны, кроме верхней, получают прозрачный цвет границ, и их не будет видно, но если вместо прозрачного задать им разные цвета:
border-left-color: red;
border-bottom-color: yellow;
border-right-color: blue;
Убеждаемся в истинности утверждения:
Как поменять форму треугольника
Для этого достаточно изменить толщину границ, сделать ее неодинаковой у сторон. Например, если все стороны оставить по 50 пикселей толщиной, а видимую сделать 70, то треугольник преобразится до такого вида:
А если наоборот уменьшить до 30 пикселей, то станет таким:
В общем, экспериментируйте!
А попробуйте написать такие стили:
div {
width: 0;
height: 0;
border: 50px solid transparent;
border-top: 30px solid red;
border-right: 30px solid red;/* Добавляем треугольник */
}
Опа, какой-то красный самолетик получился
А если добавить еще и нижнюю границу, то получиться вот что:
div {
width: 0;
height: 0;
border: 50px solid transparent;
border-top: 50px solid red;
border-left: 50px solid red;/* Добавляем треугольник */
}
А две видимые границы, равные по ширине, создадут такой треугольник:
Полный контроль над треугольниками с помощью трансформаций
Стоит отметить, что наш div хотя и не имеет размеров, но это блок, он стоит в потоке и если вы не хотите, чтобы он отодвигал другие элементы и занимал место на странице, ему нужно задать абсолютное позиционирование (читайте об этом здесь).
Ну а как получить больше контроля над треугольником? Воспользуйтесь трансформацией, а именно свойствами transform: rotate и transform: skew, которые позволяют повернуть и искривить блок. Их можно записывать через пробел.
transform: rotate(12deg) skew(5deg);
Поворот задается в градусах (deg).
Крутите и искривляйте как вам угодно, только не забудьте такому треугольнику задать абсолютное позиционирование. Ну и как вам такой метод создания треугольников в css?