@slide3
Junior front-end

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

Добрый вечер. Подскажите пожалуйста как лучше всего сверстать данные блоки, основная сложность это в искажении блока с одной стороны. На скрине я отметил о каком искажении идет речь.
5c3a22c22d6b7008820442.png
  • Вопрос задан
  • 119 просмотров
Решения вопроса 1
SmthTo
@SmthTo
Все перепёлки мира будут оплакивать мою смерть
На skewX это делать геморрой один (только на глаз) + нужно иметь четкие размера контента блока посередине, иначе ширина скоса будет меняться каждый раз, — словом, жопа.

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

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

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

Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Deliver Москва
До 160 000 руб.
Nordavind Москва
от 60 000 до 90 000 руб.
Smart Медицина Москва
от 120 000 руб.
21 марта 2019, в 00:19
5000 руб./за проект
20 марта 2019, в 20:02
1000 руб./за проект