*{box-sizing: border-box;}
.stone{position: absolute;}
.stone::before{
content:"";
position: absolute;
}
.stone::after{
content:"";
position: absolute;
}
.hexa{
top: 50px;
left: 40px;
width: 80px;
height: 40px;
background: #2ecc40;
}
.hexa::before{
bottom:100%;
box-sizing: border-box;
width: 100%;
height: 100%;
border: 40px solid transparent;
border-bottom: 30px solid #2ecc40;
}
.hexa::after{
top:100%;
box-sizing: border-box;
width: 100%;
height: 100%;
border: 40px solid transparent;
border-top: 30px solid #2ecc40;
}
.rhomba{
top: 200px;
left: 50px;
background: #ffdc00;
}
.rhomba::before{
top: 0px;
border: 30px solid transparent;
border-top: 50px solid #ffdc00;
}
.rhomba::after{
bottom: 0px;
border: 30px solid transparent;
border-bottom: 50px solid #ffdc00;
}
.penta{
top: 70px;
left: 160px;
background: #ff4136;
}
.penta::before{
top: 0px;
width: 50px;
border-top: 50px solid #ff4136;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
}
.penta::after{
bottom: 0;
border: 50px solid transparent;
border-bottom: 50px solid #ff4136;
}
.octa{
left: 165px;
top: 185px;
background: #7fdbff;
width: 90px;
height: 35px;
}
.octa::before{
width: 30px;
border-right: 30px solid transparent;
border-left: 30px solid transparent;
border-top: 30px solid #7fdbff;
top: 100%;
}
.octa::after{
width: 30px;
border-right: 30px solid transparent;
border-left: 30px solid transparent;
border-bottom: 30px solid #7fdbff;
bottom: 100%;
}
