NetSky
@NetSky
Nix-админ, Разработчик Bitrix, Drupal и Wordpress

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

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

5b0c316176605147328426.png

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

5b0c314742edc170473224.png

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

UPD: Пример второго варианта https://codepen.io/delphinpro/pen/LrYbKb
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@forspamonly2
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы