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

Question

[Иван]

понимаю, что вопрос выглядит крайней глупо и по детски, но я правда не представляю, как это можно сделать при том, чтобы это было адаптивно под таблетки. сами картинки уже перевёрнуты, жёлтые треугольники даны в свг формате, но как вставить эти блоки с картинками в таком виде - не понимаю. думал про гриды, но сетка тут специфичная и идёт не ровно. прошу помочь советом

Answer 1

[Виталий Першин]

Глядя на такие ответы хочется плакать. Если на изображении ромбы это не значит что они перевернутые квадраты.
Это все обычные квадраты, которые можно прижать друг к другу с помощью отрицательных margin и соответственно адаптировать такие блоки не составит никакого труда при помощи медиа запросов:

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

Comments

[Иван]

Виталий Спасибо тебе большое. Ты очень мне помог!

[origami1024]

Круто!

[origami1024]

Глядя на такие ответы хочется плакать

Только вот смотря на поддержу clip-path в браузерах, плакать не хочется?
https://caniuse.com/#search=clip-path

[Иван]

origami1024, фига ты спустя 3 месяца камбек совершил)

[Виталий Першин]

origami1024, Поддержка вполне хорошая, но что самое важное, если кто зайдет с такого браузера, то ничего не сломается, просто будут квадраты, а если добавить border-radius: 50%; overflow: hidden; то вполне себе приемлемые круги.

Answer 2

[origami1024]

1. Верстается ровная

2. Поворачивается
transform:rotate(45deg) врапперу этих карточек. И еще потом translate

Вот что-то начальное
https://codepen.io/origami1024/pen/gOYGyqY

Comments

[Иван]

ровная сетка в смысле дисплей грид?

[origami1024]

ровная сетка в смысле дисплей грид?

не обязательно, ровная в смысле, что изначально все ровно, а потом повернуто и сдвинуто