Как сделать скошенные углы с тенью?

Question

[Максим]

Здравствуйте!
Кучи ответов находил но все не подходят. Имеется инпут с бордер радиусом и скошенным углом. При фокусе на нем появляется еще и тень. Как все это сделать? скрины приложил по текущей реализации.

Answer 1

[Максим]

https://codepen.io/topicstarter/pen/YLxJXG вроде бы работает это

Comments

[Максим]

Наиболее близкий результат. Неидеальный, но посмотрим что скажет заказчик) спасибо

Answer 2

[Ольга Ветер]

Боюсь, самым нормальным решением тут будет побить дизайнера..

По существу - попробуйте задать этому "отрезающему" угол элементу тень только с одной нужной стороны. jsfiddle.net/agusesetiyono/1kwhsfvo/?utm_source=we... или вот https://codepen.io/iiil/pen/FAqjn так как-то. Возможно в вашем случае это будет внутренняя тень. Может поможет

Comments

[Mikhail Osher]

Плюсую за "побить дизайнера".

Answer 3

[forspamonly2]

впритык два блока одинаковой высоты, один с transform:skew, второй без. у каждого блока родитель с overflow:hidden, который обрезает первому блоку правую тень, а второму левую. путём наличия зазора под тень со всех сторон, кроме той ,которая обрезается.

Answer 4

[Андрей Федоров]

Сложно... Мое предложение такое - сделать свою тень, а не использовать box-shadow.
https://codepen.io/aliencash/pen/vjJVgm?editors=1100
Тут я создаю подложку и размываю ее с помощью filter: blur. Расчеты размеров, адаптивность пожалуйста сами, я только принцип показал.