Actually the question is how to impose such objects? enter image description here

I understand that this is a hexagon, but how to place a figure and a picture in a similar way is not.

.hexagon { position: relative; width: 300px; height: 173.21px; background-color: #47a759; margin: 86.60px 0; } .hexagon:before, .hexagon:after { content: ""; position: absolute; width: 0; border-left: 150px solid transparent; border-right: 150px solid transparent; } .hexagon:before { bottom: 100%; border-bottom: 86.60px solid #47a759; } .hexagon:after { top: 100%; width: 0; border-top: 86.60px solid #47a759; } 
 <div class="hexagon"></div>

  • Do you have any hint of code? or do you want a turnkey solution? - C.Raf.T
  • Edited a post. I do not know how to implement ... there is one side with another color. - Alexander

1 answer 1

 div.test { xwidth: 100%; xperspective: 750px; height: 200px; } .cube { padding: 50px; font-size: 4em; width: 500px; margin: auto; } .side { position: absolute; width: 100px; height: 100px; background: #85cd66; border: 1px solid black; color: white; text-align: center; line-height: 100px; } .front { transform: rotateX(-40deg) rotateY(32deg) translateZ(50px); z-index: 1000; } .top { transform: rotateX(-40deg) rotateY(32deg) rotateX(90deg) translateZ(50px); z-index: 1000; } .right { transform: rotateX(-40deg) rotateY(32deg) rotateY(90deg) translateZ(50px); } .left { transform: rotateX(-40deg) rotateY(32deg) rotateY(-90deg) translateZ(50px); z-index: 1000; } .bottom { transform: rotateX(-40deg) rotateY(32deg) rotateX(-90deg) translateZ(50px); } .back { transform: rotateX(-40deg) rotateY(-148deg) translateZ(50px); } /* cuboid - 100 x 100 x 200 */ .cuboid .front { width: 200px; } .cuboid .top { width: 200px; } .cuboid .right { transform: rotateX(-40deg) rotateY(122deg) translateZ(150px); } .cuboid .back { width: 200px; } .cuboid .bottom { width: 200px; } 
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.min.css"> <div class="test test1"> <h1></h1> <div class="cube"> <div class="side front"> <i class="zmdi zmdi-wrench "></i> 1 </div> <div class="side back"></div> <div class="side right"></div> <div class="side left"></div> <div class="side top">1.</div> <div class="side bottom">2</div> </div> </div>

  • I understand these pictures as icons, now I will try to add - Ruslan_K