Как нарисовать косую линию с тенью в HTML?

Question

[Илья]

Такое реально сделать?
И что бы оно еще рисовалось на всю ширину окна.

Answer 1

[trushka]

https://jsfiddle.net/trushka/k6ft6yac/2/
Вот так примерно можно. Ну, если надо, чтоб нижняя полоса была постоянной ширины, то её можно сверху наложить с помощью ::after и transform: skewY(). Ну, и вторую (нижнюю) тень задать уже этому элементу

Answer 2

[dom1n1k]

Фильтр drop-shadow (в отличие от box-shadow) умеет отбрасывать тень от любых форм, включая всякие диагонали.

Хотя я рассмотрел бы самый тупой вариант - сделать этот блок просто фоновой картинкой.

Answer 3

[xmoonlight]

Двухцветный градиент под углом + SVG clip-path (чтобы вырезать) и затем тень.
(думаю, что такой порядок)