Как сверстать косой блок в адаптиве?

знаю что через clip-path: polygon сверстать можно косой блок, но при адаптиве контент плавает ппц как причем , я уже и через паддинги и через маджины пытался контент внутренний как то зафиксировать , можно конечно контейнеру в котором контент задать позиционирование ... но хз хз , какими будут ваши варианты?

Опытные верстальщики же полюбому с этим сталкивались и я думаю смысла нет кидать сюда код или скрины какие-то , вопрос простейший на мой взгляд,если здесь есть опытные верстальщики проходили через данную проблему на изи подскажут реализацию данного вопроса.
  • Вопрос задан
  • 1429 просмотров
Решения вопроса 1
SmthTo
@SmthTo Куратор тега CSS
Все перепёлки мира будут оплакивать мою смерть.
Почему-то все забывают, что clip-path поддерживает координаты через calc(), что нивелирует все проблемы с адаптивностью и соединением блоков вне зависимости от количества контента, ширины блока.

clip-path: polygon(0% 0%, 100% calc(0% + 60px), 100% calc(100% - 60px), 0% 100%);
/* calc(100% - 60px) -- вот тут задал четкую ширину скоса */




Как сверстать наклонные блоки на css?
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
sniggering_deus
@sniggering_deus Куратор тега CSS
Dance Gavin Dance - Prisoner
Если я правильно понял вопрос, то: Easy - способа нет. ИМХО.

Нужно всё рассчитывать, учитывать и измерять. На всём готовом жить не выйдет и если хотите нестандартные решения, тогда пытайтесь обеспечить им нормальное состояние.

Песочница:



Посмотрите внимательнее. При определенной ширине через медиа запрос меняется состояние блока, т.е clip-path удаляется и блок принимает стандартный вид. Конечно можно играть с padding и параметрами clip-path чтобы эффект сохранялся на более низких разрешениях, но это уже всё касается реальной ситуации и реальных вариантов исхода событий.
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы