r45her
@r45her
HTML-верстальщик / Frontend разработчик

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

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

af6367a997.png

При этом на месте среза должен просвечивать фон внешнего контейнера + должна при наведении появляться тень по контуру карточки. Возможно ли в принципе такое реализовать?
  • Вопрос задан
  • 942 просмотра
Пригласить эксперта
Ответы на вопрос 4
@forgetable
Пишу на JS, верстаю наугад, ем печенье на удачу.
Не стоит делать Так

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

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

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