Можно ли сделать такую тень с помощью box-shadow?

Question

[stichii]

Добрый день! Можно ли сделать такую тень с помощью box-shadow?
Поиски в инете не дали результатов(

Answer 1

[Alex]

Конечно можно. Например, вот так: codepen. Элементы, которые будут создавать тень сверху и снизу, нужно «сперспективить». Для этого нужно задать свойство perspective их родителю, а их самих повернуть относительно оси X с помощью transform.

Comments

[stichii]

Спасибо большое!

Answer 2

[Nikolay Talanov]

Поиграйтесь с :before, :after. Я постоянно делаю всякие нестандартные тени с помощью псевдоэлементов. +если вам понадобится анимировать появление тени, то это единственный нормальный вариант (речь идет об анимации с помощью изменения opacity, ибо анимация самого свойства box-shadow это весьма прожорливая операция в плане рендеринга).