@slide3
Junior front-end

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

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

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

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

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

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

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

Войти через TM ID
Похожие вопросы