Позиционирование блоков многоульником?

Question

[smcopandakun]

Здравствуйте, в виду нехватки знаний не могу решить данную задачу, поэтому прошу вашей помощи здесь. Как бы вы реализовали это, при условии, что весь блок должен быть адаптивным?

Answer 1

[Кирилл]

Сделайте в виде SVG-иконок. Они могут масштабироваться без потери качества.

Answer 2

[Максим]

Ну все равно в маленьких разрешениях всё встанет друг под другом в столбик , а так как на картинке родителю relative а многогранникам absolute и потом media queries и двигать их , в любом браузере есть адаптивный дизайн т.е проверка как это будет смотреться на мобилках , ну и пользоваться в самом браузере редактором

Answer 3

[Елена]

сами ромбики можно сделать так:

div {
margin: 27px 0;
width: 100px;
height: 55px;
background: #F1CCAE;
position: relative;
}
div:before, div:after {
content: "";
width: 0;
height: 0;
position: absolute;
left: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}
div:before {
top: -25px;
border-bottom: 25px solid #F1CCAE;
}
div:after {
bottom: -25px;
border-top: 25px solid #F1CCAE;
}

Для мобильных поясняющий текст к иконке можно убрать и показывать его при наведении на иконку.
И разместить в три столбца: в левом три шестиугольника друг под другом, в среднем - верхний - центральный шестиугольник уменьшенного размера-нижний , в правом - оставшиеся три шестиугольника. В этом случае позиционированием можно не пользоваться, а разметить страницу на 3 блока по 33.3333333333%, внутри которых будут размещены одинаковые многоугольники. И конечно же сначала делать верстку под мобильные устройства.