Многие слышали, что можно сделать треугольники на CSS. Для этого есть прекрасный хак со свойством border, который можно использовать, чтобы сделать треугольники на CSS без единой картинки.

Как сделать треугольники на CSS

Как по вашему должен отображать границы браузер, если у всех границ цвет прозрачный (то есть их нет), а у одной (например нижней) граница = 10px и есть цвет? Что-то мелькнуло? Правильно! Он будет сужать остальные границы постепенно в одну точку. Не логично, но это так :)

То есть, если задать одну границу = нужной высоте треугольника, а остальные границы задать с прозрачным цветом, то получим треугольник, при этому можно получить как равносторонний, так и равнобедренный треугольник. Треугольник будет направлен в сторону противоположную той, у которой указана граница. Если указать правую границу, то получи «стрелочку» влево, верхнюю границу — вниз. И т. д.

Рассмотрим треугольники на CSS на примере кода

border: 30px solid transparent; /* Прозрачные границы */
border-top: 30px solid green; /* Добавляем треугольник */
width: 60px;
height: 60px;

Это будет выглядеть вот так:

И всё.