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

Посоветуйте, как сверстать:
- картинка на фоне загружается в cms одним куском
- загружаемая картинка при наведении (prntscr.com/516y83) тоже должна быть без обрезанных углов и искажений
04ee3ae52775429ea989ba59fe170c5f.png
  • Вопрос задан
  • 2277 просмотров
Пригласить эксперта
Ответы на вопрос 3
Можно сделать как-то так:
codepen.io/golumenov/pen/sKFiq?editors=110
С шрифтами и размерами особо не заморачивался, подбирайте сами.
Ответ написан
Alexufo
@Alexufo
противоречивый, сложный, весь компьютерный.
www.w3schools.com/css/css3_2dtransforms.asp

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

Или же берите и рисуйте на js свою верстку через canvas.
Ответ написан
Комментировать
Symphony
@Symphony Куратор тега CSS
Почему бы не использовать ареа меп или svg?
Ответ написан
Ваш ответ на вопрос

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

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