Positioning blocks with a polygon?

Question

css

Hello, due to lack of knowledge I can not solve this problem, so I ask for your help here. How would you implement this, given that the entire block should be responsive?

Answer 1

Make it as SVG icons. They can be scaled without loss of quality.

Answer 2

Well, anyway, in small resolutions, everything will stand one under the other in a column, and since in the picture the parent is relative and the polyhedrons are absolute and then media queries and move them, any browser has an adaptive design, i.e. checking how it will look on mobile phones, well and use the editor in the browser itself

Answer 3

diamonds themselves can be done like this:

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;
}

For mobile, you can remove the explanatory text for the icon and show it when hovering over the icon.
And place in three columns: in the left three hexagons under each other, in the middle - the top - the central hexagon of a reduced size - the bottom, in the right - the remaining three hexagons. In this case, you can not use positioning, but mark the page into 3 blocks of 33.3333333333%, inside which identical polygons will be placed. And of course, first make the layout for mobile devices.