При этом на месте среза должен просвечивать фон внешнего контейнера + должна при наведении появляться тень по контуру карточки. Возможно ли в принципе такое реализовать?
А такой контейнер может вести себя, как обычный блок? Ну т.е. с внутренней заливкой цветом, с контентом, может быть с фото, которая прибита к верхнему краю и так же обрезается на месте среза.
Олег: со внутренней заливкой можно сделать svg, можно даже помещать внутрь сколько угодно svg-элементов. Можно поместить и картинку, как в этой статье.
Тем не менее, мы всё ещё не можем нормально вставить внутрь какие-нибудь html-элементы, хотя можно поэкспериментировать с foreignObject.
Вообще, наиболее идеальный вариант - использовать clip-path в css, но он пока что поддерживается только последними версиями хрома, мозиллы и оперы. С другой стороны, если нужно что-то подобное, можно объяснить заказчику, что это реально сложно, и что отображение только в современных браузерах - нормальная плата. Думаю, через год мы вздохнём с облегчением.
Иван Астапов: спасибо за ответ.
Я читал про clip-path, и у меня с ним не получилось сделать тень по контуру при наведении. Может быть я что-то не так делал, или это в принципе нереализуемо?
Простой
