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

Question

[Анастасия Панфилова]

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


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


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

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

Подскажите, как устранить хотя бы один из этих косяков? Или всё неверно и есть способ сделать это адекватнее?

Comments

[Exploding]

Не понял где пятно и как повернуть нужно?

[Анастасия Панфилова]

Хотелось бы чтобы страница заканчивалась там, где красная строка и я не могу этого добиться
funkyimg.com/view/2wLkr

[Максим]

Анастасия Панфилова: я уже сделал , так надо ?

Answer 1

[Максим]

https://codepen.io/anon/pen/rzZrqM а скриншот в коментах

Comments

[Анастасия Панфилова]

Спасибо, это решение тоже замечательно подошло в моём случае )

[Максим]

Анастасия Панфилова: если возникнуть проблемы - пишите - помогу чем смогу

[Анастасия Панфилова]

Максим Ленский: спасибо огромное )

Answer 2

[Андрей Верх]

Откройте для себя CSS маски и не мучайтесь с rotate.

Comments

[Анастасия Панфилова]

Спасибо, это самое простое решение, было очень полезно почитать!