Как сделать тень у div четырехугольника?

Question

[Максим Валерьевич]

Всем привет. Есть такой ярлычок:
codepen.io/maksportnyagin/pen/azxzyq

В нем есть четырехугольник и ему надо сделать тень. Кто бы как решил эту проблему?
Я вот пока не пойму как.

Только если canvas использовать для его рисования.
Надо чтоб на мобилках эт тоже работало.

Comments

[codingal]

а box-shadow не подходит?

[zooks]

Какой же это параллелепипед, обычный четырехугольник.

[Максим Валерьевич]

zooks: ну да, опечатка =)

[Максим Валерьевич]

codingal: нет, не подходит. Если интересно, можете проверить сами что получится.

Answer 1

[Nikolay Talanov]

Если вы хотите использовать нестандартные формы, да еще и при этом делать для них правильные тени, то вам поможет только svg. Я не уверен насчет того, можно ли это реализовать с помощью какого-нибудь svg-mask, но вот для отдельного svg элемента тень делается легко.
Так что в вашем случае это скорее всего выглядит как явный оверкилл, и эту самую тень лучше симулировать с помощью :before допустим.
На случай если вам интересна тема с свг, я вот даже недавно делал демку с динамической тенью для svg (треугольник по центру) - codepen.io/suez/pen/GgGMGo
*Примечание для комментаторов оригинального сообщения: нет, box-shadow не поможет для элемента, со скошенными углами, сделанными с помощью border. Тень будет рендерится прямоугольной, относительно width/height объекта.

Comments

[Максим Валерьевич]

Спасибо. Что-то про svg то и забыл. А если делать через before то получится тень максимум с одной стороны так думаю.

[Nikolay Talanov]

Максим Валерьевич: Если совсем уж угарать по хакам, то вам надо сделать :before таким же как и :after, задать background в виде тени и собственно поместить этот before с нужной стороны от after для создания эффекта тени. А если тень должна быть со всех сторон, то соответственно можно просто увеличить before с помощью transform: scale()

[Максим Валерьевич]

Nikolay Talanov: Думал над этим, но тогда еще blue придется накладывать, чтоб была тень красивая.

[Максим Валерьевич]

Только поддерживается ли filter всеми мобильными браузерами? У кого поддержка больше в плане мобильных? svg или filter.

[Nikolay Talanov]

Максим Валерьевич: caniuse.com/#feat=svg-filters если вы про это спрашивали

[Максим Валерьевич]

Во =) codepen.io/anon/pen/MYRYxO

[Nikolay Talanov]

Максим Валерьевич: Нормально выглядит.

[Максим Валерьевич]

Nikolay Talanov: Прям как по шаблону =) Конечно не хотелось лишний код, но думаю это решение лучше чем картинка =)

Answer 2

[Ilya Korablev]

Сам не знаю, но может быть как-то через :after и :before можно?

Answer 3

[Андрей]

Если тень в один-два пикселя, то можно подложить элемент со смещением.
Для маленьких элементов, вроде уголков, это работает. Но в общем случае — нет.

Пример
codepen.io/standys/pen/wBZBRG

Comments

[Максим Валерьевич]

Сделал добавив такой же before
codepen.io/anon/pen/MYRYxO

[Андрей]

С поддержкой blur пока туго.
А так спасибо за наводку, это круто.

[Максим Валерьевич]

Андрей: Туго в основном у IE только. Все основные браузеры уже поддерживают, и мобильные тоже.