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

Question

[sergei179]

Как сделать подобные треугольники с тенью?


Не могу разобраться с тенью для фигур.
Треугольник должен быть острым.

Comments

[Ankhena]

Самый простой вариант https://jsfiddle.net/bevdt9Ly/ (в реальной жизни это должен быть псевдо, а не div)
Другой просто вариант - это SVG. С тенью прямо внутри или с drop-shadow.
А также другие легко гуглящиеся методы с блоками и поворатами и т.д.

[sergei179]

Ankhena, ага, то есть если у человека в библиотеке нет символа, то мы подтягивания гугл шрифт? Тоже видел такой способ, но писали что у некоторых нет такого символа в шрифтах.

По дабл блоку (блок в блоке) читал, но там не острые треугольники. Они или равнобедренные или односторонние.

За свг по этому моменту не читал. Посмотрю, спасибо

[Ankhena]

sergei179, какой гугл шрифт, у меня вообще в песочнице шрифт по умолчанию стоит, т.е. в каких-то браузерах ариал, в каких-то times new roman. Выберите шрифт в котором вам больше нравится как выглядит треугольник.

Они или равнобедренные или односторонние.

Брррр...
Может сначала с треугольниками разобраться?

По дабл блоку (блок в блоке) читал, но там не острые треугольники.

Как трансформ зададите, такие и будут.

Можете хоть по классике бордерами нарисовать и drop-shadow задать.

[Ankhena]

sergei179, держите, с очень острым углом :) https://jsfiddle.net/v4hzxd5c

[Виталий Першин]

Как вариант:

[sergei179]

Виталий Першин, вопрос по кроссбраузерности - будет ли это работать в опере?

[Виталий Першин]

sergei179, Это довольно просто проверить. Открываете оперу и смотрите) У каждого верстальщика должен быть набор всех браузеров под рукой)

[sergei179]

Виталий Першин, Согласен, но решил спросить, на случай что так будет быстрее)
спасибо за помощь :)

[sergei179]

Ankhena, Большое спасибо :)

Буду смотреть)

Answer 1

[Максим]

Кроссбраузерный способ то есть SVG под капотом feDropShadow плюс path

Собственно, рнисуем треугольники и дублируем, два треугольника смещем по одинаковым траэкториям, первому то есть не видимому треугольнику делаем filter и присваиваем его нижнему первому треугольнику и получаем :

Answer 2

[tundramani]

filter:drop-shadow(2px 3px 5px black);