Как повернуть блок?

Суть в том, что футер у меня на макете имеет такую форму:
0ba41feb2b594ca783e8c70e00c5d9eb.png

Я знаю как реализовать "непрямую" сторону, но ситуацию отягащает то, что элемент находится внизу страницы.
Когда я посворачиваю футер с помощью transform: skewY(-3deg), внизу страницы остаётся "пятно", не спасает даже абсолютное позицирование, элемент не хочет уходить вниз (позиционировала и относительно враппера, и враппер, и относительно body)
802af475313f4c018e3ef172640c8ba8.png

Так же пробовала transform: rotate(-3deg) и преувеличенную ширину и высоту. Всё окей, всё уходит, идеально. Однако, не смотря на overflow-x: hidden на мобильных экранах всё равно можно проскроллить вбок.

Есть вариант с svg, но у меня background картинкой, не цветом, так что не знаю, можно ли это сделать?

Подскажите, как устранить хотя бы один из этих косяков? Или всё неверно и есть способ сделать это адекватнее?
  • Вопрос задан
  • 398 просмотров
Решения вопроса 2
LenovoId
@LenovoId
svg, css,js
https://codepen.io/anon/pen/rzZrqM а скриншот в коментах
Ответ написан
sadisme
@sadisme
font-size:30rem
Откройте для себя CSS маски и не мучайтесь с rotate.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

Похожие вопросы