Как сверстать такой блок?

Question

[rybakova]

Посоветуйте, как сверстать:
- картинка на фоне загружается в cms одним куском
- загружаемая картинка при наведении (prntscr.com/516y83) тоже должна быть без обрезанных углов и искажений

Answer 1

[Андрей Голуменов]

Можно сделать как-то так:
codepen.io/golumenov/pen/sKFiq?editors=110
С шрифтами и размерами особо не заморачивался, подбирайте сами.

Comments

[Anton Filippov]

Not bad^^

Answer 2

[Александр Борисович]

www.w3schools.com/css/css3_2dtransforms.asp

transform: skewX(-35deg);
Могу предположить что можно сверстать прямоугольники таблицей а потом применить skew.
Текст внутри skew можно компенсировать обратным искажением transform: skewX(35deg);
Но что там будет по факту... смотрите сами.

Или же берите и рисуйте на js свою верстку через canvas.

Answer 3

[A K]

Почему бы не использовать ареа меп или svg?

Comments

[Александр Борисович]

кстати да.. ареамап и все забыли)