Как сделать кроссбраузерный скошенный тянущийся блок с помощью clip-path?

Question

[Александр Алексеев]

Как сделать скошенный тянущийся блок с помощью clip-path?

Суть проблемы.
Делаю clip-path с помощью svg в процентах. Все работает, но при изменении высоты блока (если внутри становится больше контента или при адаптивке текст становится уже и выше), угол среза начинает меняться.

Как сделать чтоб он оставался одинаковым?

Answer 1

[Роман Мисюра]

1. bennettfeely.com/clippy - поможет сгенерировать что надо.
2. Использовать разом с этим CSS функцию calc()

Например:

-webkit-clip-path: polygon(50px 0, 100% 0, 100% calc(~"100% - 50px"), calc(~"100% - 50px") 100%, 0 100%, 0 50px);
    clip-path: polygon(50px 0, 100% 0, 100% calc(~"100% - 50px"), calc(~"100% - 50px") 100%, 0 100%, 0 50px);

Обрежет сверху слева угол и справа снизу. Т.е. двигаться в том направлении.

Но в Firefox'e и эксплоере работать не будет. (В ФФ надо галочку включать) Т.е. там с clip-path проблемы caniuse.com/#search=clip-path

Comments

[Александр Алексеев]

ну вот я собственно ищу кроссбраузерное решение, поэтому калк отпадает
пока решил обрезать псевдоэлемент с постоянной шириной и подкладывать его под блок

[Роман Мисюра]

Ну тогда пробовать обрезать через двойной фон с маской, либо псведо-элементы.
По сути кроссбраузерности не писали, тут смотря, насколько такие штуки критичны.

И еще раз, почитайте заголовок свой для Вопроса. Какой вопрос - такой ответ собственно.