C помощью CSS можно создавать треугольники. Но что если нужно иметь тени под ними? К сожалению, классический трюк с рамками не меняет формы элементов, он только создает визуальную иллюзию. Поэтому посмотрим на альтернативные решения.
С такими символами можно делать все, что угодно.
<span class="triangle">▲</span>
.triangle {
color: #BADA55;
text-shadow: 0 0 20px black;
}
Можно менять цвет, тени, размер и многое другое. Если треугольник не соответствует требуемой форме, то с помощью трансформаций CSS3 его можно растянуть и повернуть.
Данная техника имеет существенный недостаток. Она полагается на трансформации CSS3, которые не имеют хорошей поддержки в браузерах. Кроме того, старые браузеры могут иметь проблемы при отображении самих иконок юникод.
Метод двойного элемента
Нужно иметь один элемент со скрытием выступающих частей, в котором будет размещен другой элемент, который будет повернут смещен относительно первого. Часть будет видима и сформирует треугольник. Затем можно использовать тени.
<div class="triangle-with-shadow"></div>
.triangle-with-shadow {
width: 100px;
height: 100px;
position: relative;
overflow: hidden;
box-shadow: 0 16px 10px -17px rgba(0,0,0,0.5);
}
.triangle-with-shadow:after {
content: "";
position: absolute;
width: 50px;
height: 50px;
background: #999;
-moz-transform: rotate(45deg);
top: 75px;
left: 25px;
box-shadow: -1px -1px 10px -2px rgba(0,0,0,0.5);
}
Обратите внимание на отрицательный радиус распыления у родительского элемента, что позволяет получить тень только на одной стороне.
Используйте изображения
Испытанный старый метод. Но он дает дополнительные HTTP запросы и требования к управлению спрайтами. Кроме того, для адаптивных шаблонов придется исхитряться.