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

Левый краешек карточки, с которым возникла сложность:
5ed4b26e1a11a230525649.png
Никогда прежде не сталкивался)
Основные сложности:
-Нужно, чтобы тень повторяла форму элемента
-При необходимости можно применить border (на hover, например)
-Карточка может быть динамической высоты, но "вырез" должен сохраняться по центру

Если карточку сделать полностью svg фигурой, то проблемы с масштабированием. Если использовать clip-path, то не накладывается бордер. Если использовать костыльные способы с псевдоэлементами :before, :after, то тоже невозможно наложить тень или бордер.

Если сделать два блока с clip-path, один из которых будет меньше по каждой стороне на 1px, а фоновый будет имитировать бордер, то этот бордер получается "лесенкой" на углах.

В общем, пробовал многое, решил забить. Сейчас вспомнил и настолько банальная задача не даёт мне покоя)

Достаточно описать примерный принцип реализации подобных вырезов, может, конкретный инструмент/свойство.
  • Вопрос задан
  • 918 просмотров
Решения вопроса 2
@Amenothis
Ответ написан
@ivansedov
Вот такой блок должен был получиться?
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

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