BenderIsGreat34
@BenderIsGreat34
junior front-end

Каким способом можно сверстать эту конструкцию?

понимаю, что вопрос выглядит крайней глупо и по детски, но я правда не представляю, как это можно сделать при том, чтобы это было адаптивно под таблетки. сами картинки уже перевёрнуты, жёлтые треугольники даны в свг формате, но как вставить эти блоки с картинками в таком виде - не понимаю. думал про гриды, но сетка тут специфичная и идёт не ровно. прошу помочь советом
5d6e97c21dded551455632.png
  • Вопрос задан
  • 188 просмотров
Решения вопроса 1
Get-Web
@Get-Web Куратор тега CSS
Front-End Developer
Глядя на такие ответы хочется плакать. Если на изображении ромбы это не значит что они перевернутые квадраты.
Это все обычные квадраты, которые можно прижать друг к другу с помощью отрицательных margin и соответственно адаптировать такие блоки не составит никакого труда при помощи медиа запросов:

Посмотреть на codepen: https://codepen.io/get-web/pen/pozdRjx
Посмотреть на jsfiddle: https://jsfiddle.net/l2banners/4n1sbc6g/2/

Ответ написан
Пригласить эксперта
Ответы на вопрос 1
origami1024
@origami1024
went out for a night walk
1. Верстается ровная
5d6eae83a7ab0573486093.png
2. Поворачивается
transform:rotate(45deg) врапперу этих карточек. И еще потом translate

Вот что-то начальное
https://codepen.io/origami1024/pen/gOYGyqY
Ответ написан
Ваш ответ на вопрос

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

Похожие вопросы