Как сделать тень на кривой край у блока?

Question

[Gimir]

Добрый день!
Вот элемент:
Скошенный край сделан с помощью бордера вот так:

.menu::before {
  content: "";
  width: 0;
  height: 0;
  position: absolute;
  bottom: 0;
  left: -350px;
  border-right: 350px solid skyblue;
  border-top: 940px solid transparent;
}

Скажите пожалуйста, как сделать тень на скошенный край у этого блока?

Comments

[Gimir]

Максим Ленский, это как?

[Brad9aga]

Максим Ленский, это больше похоже на бордер чем на тень ))

[Gimir]

Максим Ленский, похоже на бордер в бордере)) но спасибо за попытку

Answer 1

[Сергей Карвасарный]

Вот в статье есть в низу тень для сердечка - css.yoksel.ru/box-shadow как-то так нужно будет делать, кучу всего писать в box-shadow.

Answer 2

[Максим]

Предлогаю применять SVG вместе со своим фильтром и выглядеть это будет так: https://codepen.io/topicstarter/pen/GVNOaK

Answer 3

[Brad9aga]

https://jsfiddle.net/we5o8yh7/
думаю дальше сам докумекаешь

Answer 4

[Gimir]

Сделал:
Просто добавил псевдокласс after, повернул с помощью rotate и выровнял на левый край вот так:

.menu::after {
  content: "";
  width: 1px;
  height: 130%;
  position: absolute;
  bottom: -37px;
  left: -134px;
  background-color: lightgrey;
  opacity: 1;
  transform: rotate(20.5deg);
  box-shadow: -5px 4px 30px rgba(0, 0, 0, .8);
  z-index: -1;
}