Искажение блока с одной стороны css?

Question

[Johny Eagle]

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

Comments

[alex]

skew

[Rustam Bainazarov]

Лучше сделать на clip-path, тогда по формуле можно будет сделать управляемый скос, чья ширина к примеру, будет равна 50 пикселей при любой высоте.

Если делать на Skew, то ширина скоса не управляется так точно.

[Johny Eagle]

SmthTo, я пытался сделать clip-path, но он не искажает блок, а делает искажение в блоке, подскажите как лучше поступить?

[Rustam Bainazarov]

Юрий Глухов, немного иначе. Надо на calc делать. Скину через час. Пока пришлите ваш код в песочнице. JSfiddle.com.

[Johny Eagle]

SmthTo, https://jsfiddle.net/fcqLka8w/3/ заранее спасибо Вам!

[Rustam Bainazarov]

Юрий Глухов, написал ответ.

Answer 1

[Rustam Bainazarov]

На skewX это делать геморрой один (только на глаз) + нужно иметь четкие размера контента блока посередине, иначе ширина скоса будет меняться каждый раз, — словом, жопа.

Поэтому так: clip-path на calc() + отрицательный margin по ширине скоса.

Обратите внимание на второй блок. Если контент будет больше и высота блока выше, чем минимальное, заранее заданное значение, есть небольшая проблема с углом наклона текста -- это не исправить на автоматическом уровне с помощью CSS, т. к. блок с текстом мы поворачиваем с помощью градусов, а скос родительского блока делаем с помощью плавающей координаты опорной точки.

EDGE и IE11 в полёте с динамическим clip-path — можно просто сделать изначально безо всяких наклонов, а для поддерживаемых браузеров с помощью media-запрос supports сделать следующее: