Box-shadow perspective, как реализовать?

Question

[Pshkll]

Доброго времени суток! Подскажите, возможно ли реализовать подобную тень для белого блока средствами CSS?


UPD:

Answer 1

[Александр Карпов]

Вот так можно реализовать чисто на css:
https://jsfiddle.net/uc82jk4j/

Comments

[Pshkll]

Спасибо за старания, но, к сожалению, это не то. Обновил вопрос чтобы было понятно какой вид тени там.

[Александр Карпов]

Pshkll: Я понял вас, изменил свой ответ.

[Pshkll]

:)) Александр К: более-менее хороший вариант. Спасибо!

Answer 2

[ArturArturov]

можно такое сделать:
надо использовать тень самого блока и двух псевдоэлементов, которые при помощи transform: rotate() подкручиваются

Comments

[Pshkll]

Спасибо, но ваше решение не подойдет ибо на фоне (за белым блоком) два разных цвета.

[display: block]

Бэкграунд у псевдоэлементов указывай в rgba с указанием максимальной прозрачности.

[ArturArturov]

Pshkll еще как подойдет, у блока и его псевдоэлементов используется box-shadow. пробуйте и получится

[Pshkll]

ArturArturov: понял вашу идею, попробую, спасибо!

Answer 3

[Юрий Кучеренко]

Box Shadow

Comments

[Pshkll]

И к чему вы написали это? Вид тени видели на изображении выше?

[Юрий Кучеренко]

Pshkll: я видел, Внизу человек выкатил пример с box-shadow

Answer 4

[Андрей]

Вот решение с поворотом блока https://jsfiddle.net/c4yc8L8d/1/

Comments

[Pshkll]

Всмысле с поворотом? Зачем он?

[Андрей]

Не понял сути задачи) Правильное решение будет при помощи множественных теней. Любую тень можно реализовать. Смотрите примеры реализации flattyshadow.com www.longshadowgenerator.com https://codepen.io/maxakohler/pen/mAxHz

[Андрей]

вот более наглядный codepen.io/sommi/pen/zqbLd

Answer 5

[dom1n1k]

1. transform: perspective
2. svg-трапеция с тенью
3. растровое изображение тени
Во всех трех случаях потребуется псевдоэлемент.

Comments

[Pshkll]

Как-то мутно все. Зачем вообще растр, та и свг? В том то и суть - уйди от растра. Трапецию можно сделать и с простым div, применив к нему perspective и rotate. Но потом размыть не получится.

[Pshkll]

ЗЫ блок адаптивный.

[dom1n1k]

Растр это самое немодное решение, но пожалуй самое надежное и не влияющее на производительность.