Можно ли нарисовать через canvas блок с скошенными краями и разместить там html?

Question

[freeman0204]

Нужно нарисовать подобные скосы, в этих блоках есть паралакс, все способы что я перепробовал не подходят для косых углов как здесь. Надежда только на канвас. Можно ли нарисовать через canvas блок с скошенными краями и разместить там html?
фото 1

фото 2

Comments

[ProjectSoft]

Используйте PNG а не JPG, JPEG
Нижний блок поднимите position: relative; z-index: 10 (поиграться z-index)

Answer 1

[_ _]

По-сути на сегодняшний день есть два способа это сделать:
- clip-path
- transform

clip-path это нормальный способ, не трюк. Но с кроссбраузерностью у него все плохо.
transform это скорее трюк. Внешний блок skewY(5deg), вложенный skewY(-5deg).
Вот пример codepen.io/AMar4enko/pen/LbMmWe

Comments

[freeman0204]

после трансформ skewY паралакс не работает в мазиле.

[freeman0204]

Или может skewY применить к другому блоку? я уже 2 создавал и о дному skewY а к другому паралакс, пока ничего.