Прозрачный треугольник DIV на картинке?

Question

[Alibek Kulseitov]

Как реализовать такие скошенные блоки? Это должно быть в процентах а то есть адаптивными.
Конечно можно вырезать картинкой! Но нужно будет в дальнейшем сделать fixed backgound то есть типа паралакс скрола

Comments

[Alibek Kulseitov]

Решил вопрос путем
-webkit-transform: skewY(4deg); /* Chrome, Opera 15+, Safari 3.1+ */
-ms-transform: skewY(4deg); /* IE 9 */
transform: skewY(4deg); /* Firefox 16+, IE 10+, Opera */

НО! Картинки не поддается трансформаций. Думаю потому что она fixed.
Вторая проблема это размытие контента после применения transform

Answer 1

[GreatRash]

1) вложить картинку в блок
2) блок в CSS повернуть на 30 градусов по часовой стрелке - transform: rotate(30deg);
3) картинку в CSS повернуть на 30 градусов против часовой стрелки - transform: rotate(-30deg);

Comments

[Alibek Kulseitov]

такая пробемка смотрите) rghost.ru/7MlbSchtB/image.png Как залить боковые пустые пространства?

[GreatRash]

AlibekKulseitov: codepen.io/anon/pen/JdwgeW

[Alibek Kulseitov]

GreatRash: а можете посмотреть мой коментарий под моим постом

Answer 2

[MhMadHamster]

codepen.io/anon/pen/EjGOgO
через skew