Как исказить div таким образом?

Question

[Nwton]

Есть ли возможность на чистом css подобным образом исказить div вместе с содержимым? Знаю, можно применить 3d+perspective+rotate, но хотелось бы без этого, работая в одной плоскости.

Answer 1

[Сергей Горячев]

Есть ли возможность на чистом css подобным образом исказить div вместе с содержимым?

Знаю, можно применить 3d+perspective+rotate

А это не чистый CSS? Нельзя без этого.
Если бы нужна была просто фигура такая, можно было бы псевдоэлементами, но с содержимым нет.

Answer 2

[vintage]

ds-overdesign.com/transform/matrix3d.html

Answer 3

[Сергей Тутуков]

Shape - мб подойдет для твоей задачи

Answer 4

[GreatBOND]

https://habrahabr.ru/post/126207/

Answer 5

[Дмитрий]

Если содержимое не должно искажаться по перспективе то:
1. Использовать свойство Clip. Однако подойдет в случае когда поддержка старых браузеров не особо волнует.
2. Использовать SVG.
3. Создать форму при помощи псевдоелементов, поместив внутрь спаны которым задать флоат по правой стороне и ширину в процентном размере по градации, дабы контент не вылазил за фигуру.

Если содержимое должно искажаться по перспективе, то лишь ею единой.)