Всем спасибо, все свободны :)
Решение нашёл сам, и так мы делаем в css нужному нам элементу к примеру div -webkit-clip-path: polygon (нужные нам координаты). Но оно не работает в firefox... МЫ берём следующий скрипт
https://github.com/andrusieczko/clip-path-polygon. И ура! Всё работает как нам надо пропорции сохраняются т.к. данные заданы в процентах, а скрипт пересчитывает их.
А вот анимировать уже не тяжело, разберётесь)