Верстка срезаных блоков?

Question

[virtualhero]

Как можно сверстать такие блоки без clip-path, потому что потдержка IE нужна, от 11.


Пробовал трансформациями подгонять, но проблемы с адаптацией + сам контент который должен лежать в этих блоках очень сложно подогнать нормально вместе с адаптацией.

Посоветуйте решение пожалуйста.

Comments

[Андрей Павленко]

Может, как вариант, посмотрите в сторону SVG, в котором будете прописывать нужный текст?

[Froggyweb]

конь в вакууме нет контента непонятно как он себя должен вести выстраиваться под треугольник или как? какие браузеры обязательны? например Opera Mobie?

[virtualhero]

Froggyweb: да) и ие от 11. просто контент должен быть в блоках с такой формой, и не вылазить из его границ. так понятно?)

[Froggyweb]

virtualhero: не все :)
либо верстальщик будет ручками контент подбирать либо https://habrahabr.ru/post/149040/ очень новомодно что делать с остальными случаями - непонятно

Answer 1

[dom1n1k]

Картинку использовать религия не позволяет?

Comments

[virtualhero]

нет, в этих блоках должен быть контент динамический

[dom1n1k]

Тогда задача сформулирована непонятно, не хватает данных.

(Хотя интуитивно-предположительно мне кажется, что ответ будет "никак", с учетом IE)

[virtualhero]

dom1n1k: ахах)

Answer 2

[Дима Паутов]

https://jsfiddle.net/rns0gtr6/

Comments

[virtualhero]

я цвет к примеру привел) градиент не подойдет(

[Дима Паутов]

virtualhero: это почему? Что мешает поверх градиента блоки поставить?

[Дима Паутов]

virtualhero: вы конечно можете использовать transform: skew. Но замучаетесь подгонять блоки друг с другом

[virtualhero]

Дима Турков: потому что я цветами обозначил какие должны блоки быть по форме) на деле же там будет в одном слайдер а в другом текст динамический и пара кнопок, и ничего не должно вылазить за границы блоков)

[Дима Паутов]

virtualhero: так не будет, как ты хочешь. Думаешь там всё по наклонной пойдёт, так как ты хочешь? Ага, удачи