Левый краешек карточки, с которым возникла сложность:
Никогда прежде не сталкивался)
Основные сложности:
-Нужно, чтобы тень повторяла форму элемента
-При необходимости можно применить border (на hover, например)
-Карточка может быть динамической высоты, но "вырез" должен сохраняться по центру
Если карточку сделать полностью svg фигурой, то проблемы с масштабированием. Если использовать clip-path, то не накладывается бордер. Если использовать костыльные способы с псевдоэлементами :before, :after, то тоже невозможно наложить тень или бордер.
Если сделать два блока с clip-path, один из которых будет меньше по каждой стороне на 1px, а фоновый будет имитировать бордер, то этот бордер получается "лесенкой" на углах.
В общем, пробовал многое, решил забить. Сейчас вспомнил и настолько банальная задача не даёт мне покоя)
Достаточно описать примерный принцип реализации подобных вырезов, может, конкретный инструмент/свойство.
Простой
Простой
