Как сверстать блок со срезанным углом?

Question

[Олег]

Нужно сверстать такую карточку.



При этом на месте среза должен просвечивать фон внешнего контейнера + должна при наведении появляться тень по контуру карточки. Возможно ли в принципе такое реализовать?

Answer 1

[Иван Вишневский]

Не стоит делать Так

Для подобных вещей лучше всего использовать svg и по ховеру применять к нему filter: shadow.

Comments

[Олег]

А такой контейнер может вести себя, как обычный блок? Ну т.е. с внутренней заливкой цветом, с контентом, может быть с фото, которая прибита к верхнему краю и так же обрезается на месте среза.

[Иван Вишневский]

Олег: со внутренней заливкой можно сделать svg, можно даже помещать внутрь сколько угодно svg-элементов. Можно поместить и картинку, как в этой статье.

Тем не менее, мы всё ещё не можем нормально вставить внутрь какие-нибудь html-элементы, хотя можно поэкспериментировать с foreignObject.

Вообще, наиболее идеальный вариант - использовать clip-path в css, но он пока что поддерживается только последними версиями хрома, мозиллы и оперы. С другой стороны, если нужно что-то подобное, можно объяснить заказчику, что это реально сложно, и что отображение только в современных браузерах - нормальная плата. Думаю, через год мы вздохнём с облегчением.

[Олег]

Иван Астапов: спасибо за ответ.
Я читал про clip-path, и у меня с ним не получилось сделать тень по контуру при наведении. Может быть я что-то не так делал, или это в принципе нереализуемо?

Answer 2

[Gennadiy Balachkov]

Да, лучше это сделать через SVG, например таким образом
https://jsfiddle.net/gjds3sfx/1/

Comments

[Alexander Surikov]

я бы лучше сделал уголок (треугольник) в свг, а под ним край объекта скруглил. свг во многих ситуациях костыль, имхо.

Answer 3

[kn1ght_t]

clip-path?

Answer 4

[Андрей]

Я нашел вариант с псевдоэлементами у вот этого человека https://codepen.io/Martin-Duran/pen/kFpaI?editors=1100
Выделил один блок из кучи оформления и подобных в jsfiddle. ( https://jsfiddle.net/1wkjx1js/2/ )
Тень при :hover для этого варианта я не придумал, к сожалению, но половина задачи уже что-то :)