Как сверстать(правильно) такое?

Как сделать такие блоки?(Правильно)
Должно быть адаптивным + хотя бы немного потдерживать IE

У меня пока только 2 варианта
Пробовать вместо фона пихать svg и играться с position
Или пробовать clip-path - но тут нету потдержки IE ну и с адаптивностью нужно будет много играться
spoiler
Спойлер
5aff20f7a8353798112200.png5aff2104aae0e361629661.png
  • Вопрос задан
  • 317 просмотров
Пригласить эксперта
Ответы на вопрос 4
@ljutaev
html-програмист
Привет. пробуй еще свойство transform: skew применять , адля clip path есть полифил
https://github.com/AlfonsoFilho/ClipPath
Ответ написан
alsolovyev
@alsolovyev
А в чем состоит задача? Наклонить блоки? transform: skewY(20deg) вполне справляется с этой задачей + поддержка браузерами есть + адаптивность решается % величинами

Сразу извинюсь за говнокод (совсем худо чет мне сейчас), но для показа идеи сойдет: https://jsfiddle.net/ejoqLu7m/1/

1. Создаете блок, который смещаете по оси Y на N градусов
2. Внутри создаете блок, который смещаете по оси Y на -N градусов.
3. Первому блоку задаете oveflow: hidden
4. Вопрос адаптивности решаете шириной в % (50% в нашем примере)

Адаптивно\кросбраузерно. В2 картинка по аналогии делается.

Или я задачу не так понял?
Ответ написан
bugo_aneo
@bugo_aneo
Верстальщик по жизни, буддист, кофеман
Про такие игры с косыми блоками я могу рассказать очень хорошо. Только покажите мне где тут будет текстовый контент. Мои соображения и личное ИМХО:

1. Если это тупо бекграунд секции - на кой заморачиваться? Можно и градиентом отделаться...

2. Все эти skewY(Ndeg) - требуют потом отработки по scale(N), т.к. скривленная секция и выправленный бекграунд плохо уживаются. Как и на оборот.

3. Вы можете отыграть вариант с псевдоэлементами: это мой экспримент, а это живая болванка

4. Все клиппасы - это круто! Но они не позволяют безболезненно подогнать блоки в стык, т.к. обрезают "вьюпорт", но ничего не делют с боксом, т.е. он как был квадратный, так и останется. Не будет подгонки к скошенному ребру, скошенного же соседа, учтите это. Потом они обладают свойством оверфло, т.е "режут" вместе с контентом, а значит его придется отодвигать от срезаемого края паддингом-маргином.
Ответ написан
Комментировать
lukoie
@lukoie
откуда в задаче берется ИЕ, кстати?
Ответ написан
Ваш ответ на вопрос

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

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