Как можно сверстать такой блок?

Question

[Евгений Скоробогатов]

Есть картинка и фон под нее ...



как лучше сверстать вот такой вариант ?



При этом блок должен быть адаптивным .

Comments

[alex-1917]

дизайнеру лопатой да по рукам

[Евгений Скоробогатов]

alex-1917, Это конечно хорошее решение ... но ..

Answer 1

[Сергей delphinpro]

Вариант "В лоб" — два вложенных блока, чтобы получить четыре псевдоэлемента. ПЭ позиционируются под основной плашкой, трансформируются и наделяются подходящими тенями через box-shadow.
Вариант получше — на первый взгляд кажется можно обойтись двумя ПЭ, наклонными прямоугольниками. Но надо смотреть, как выйдет.
Самый отстойный вариант — вырезать тени картинками.

UPD: Пример второго варианта https://codepen.io/delphinpro/pen/LrYbKb

Comments

[Евгений Скоробогатов]

Можно немного поподробнее а то я что то недопонимаю =)

[CODALSD]

Сергей delphinpro Мне тоже хотелось бы посмотреть на решение с тенями от псевдо, точнее как такие тени задать блокам которые изгибаются

[Сергей delphinpro]

Евгений Скоробогатов, CODALSD,
На вскидку, как-то так https://codepen.io/delphinpro/pen/LrYbKb

Answer 2

[forspamonly2]

border-image: https://developer.mozilla.org/en-US/docs/Web/CSS/b...