@orion_d
Начинающий верстальщик

Какие варианты верстки таких блоков + адаптив можете предложить?

Здравствуйте.
Стоит задача адаптивно сверстать такие блоки.
Подскажите пожалуйста варианты решения.
5a056d34011fa973002477.png
Спасибо за проявленный интерес к теме.
  • Вопрос задан
  • 629 просмотров
Пригласить эксперта
Ответы на вопрос 9
LenovoId
@LenovoId
svg, css,js
если адаптивно то по любому на мобилках они 100% экрана
а извращаться только на декстопах ну максимум на планшетах и то не рекомендуется
Ответ написан
Комментировать
alex-1917
@alex-1917
Если ответ помог, отметь решением
Убирай малые срезы, а длинный срез банальными псевдоэлементами - треугольник что ли ни разу не рисовали через css???
В итоге делаешь два блока - синий и черный, у каждого свой срез по длинной стороне, для 640px делай ширину 100% (т.е. будет сверху черный, ниже синий), для остальных разрешений - как на эскизе.
Естественно, на 640px эти безумные срезы будут ляпом, т.е. там делай все прямоугольное.

Еще раз про малые срезы - разный угол наклона по отношению к длинной линии точно не режет глаз? У меня лично кот, всегда сидящий рядом с монитором, с ума сошел... Дай мне телефон дизайнера, я ему сам а-та-та дам
Ответ написан
Комментировать
JustinBieber
@JustinBieber
Звизда
просто блоки делать квадратными со своими цветами на фоне и перечислять
Ответ написан
Комментировать
@orion_d Автор вопроса
Начинающий верстальщик
А сама реализация блоков - псевдоэлементами, или картинками?
Ответ написан
aliencash
@aliencash
Партизан
Пусть дизайнер думает как адаптив тут предложить. Это не задача верстальщика. В остальном используйте linear-gradient для background-image.
Ответ написан
Комментировать
Clip Path, может быть skew, для адаптива аналогично, срезаем только угол не справа/слева, а сверху/снизу.
Ответ написан
Комментировать
kentuck1213
@kentuck1213
Можно на canvas это сделать.
Ответ написан
Комментировать
profesor08
@profesor08 Куратор тега CSS
Если не хочешь гемороиться, воткни на фон картинку, или svg элемент. На мелких девайсах прячь, а блоку задавай фон.
Ответ написан
Комментировать
@germanius
frontend dev
Можно сделать на псевдоэлементах, если владеешь канвасом то на нем, там проще управлять элементами (опять таки если владеешь). Картинками такие вещи уже давно не делают
Ответ написан
Комментировать
Ваш ответ на вопрос

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

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