Как сверстать эти квадраты?

Question

[safbek]

Здравствуйте! Как сверстать такие вот перевернутые квадраты? С помощью css...более валидно, без нагроможденности. Подскажите, пожалуйста.

Answer 1

[Максим Тимофеев]

Александр Петров правильно советует, но мне кажется проще сделать с помощью svg

Comments

[safbek]

Здравствуйте! Решил следовать вашему совету, но немного застрял. Не могу сделать адаптивными эти квадраты. И еще как лучше сделать, писать от руки код или нарисовать в векторном редакторе и скопировать код? Я писал от руки, потом попробовал в редакторе, код в редакторе какой -то грязный(см в браузере). Вообщем, если найдется время, помогите сорентироваться, пожалуйста. Вопросы такие возникли:
1. Как сделать их адаптивными?(veiwBox с чем едят()
2. Какой кусочек кода надо скопировать в редакторе?

[Максим Тимофеев]

safbek:
для работы с svg удобно использовать inkscape.paint-net.ru
Что бы использовать svg, надо немного про него узнать, краткое и адекватное инфо есть тут:
https://www.w3schools.com/graphics/svg_intro.asp
Конкретно про адаптивность можно почитать тут: https://svg-art.ru/?p=5
Если останутся вопросы - выкладывайте код на https://jsfiddle.net что бы разговор был предметный

[safbek]

Максим Тимофеев: Спасибо за ссылки, все прочитал, но пока только поверхностные знания. Скажите, пожалуйста, как бы вы сверстали эту секцию. Я делал сначала так:https://jsfiddle.net/amd15qLa/9/
Затем решил сделать все в одной картинке вот так:

Если верстать как в картинке, то что делать с маленькими иконками. Их не смог перевести в svg. И что делать с текстом. Написать на картинке и потом подгонять через медиа-запросы? Вообще запутался. Каким бы путем вы пошли?

[safbek]

Максим Тимофеев: изображение вставлял таким вот кодом:

<img src="img/rect.(svg)" style="width: 100%; height: auto;">

В чем, собственно, разница между такой вставкой и напрямую кода из редактора? Код из него получается почти на страницу А4, если не больше

[Максим Тимофеев]

safbek: Если не вставлять как код, не будет возможности влиять на svg код из css или js/

[safbek]

Максим Тимофеев:
Спасибо!А что касаемо первого сообщения "Каким бы путем вы пошли?")

Answer 2

[Александр Петров]

Юзай transform и rotate

htmlbook.ru/css/transform

Ставишь обычные квадраты блоками и начинаешь их крутить как только можно....