Cваял, но по своему.
.wall .stone{
position: absolute;
}
.stone::after,
.stone::before {
content: “”;
position: absolute;
border: 0 solid;
}
.hexa {
top: 50px;
left: 40px;
border: solid #2ECC40;
border-width: 20px 40px;
}
.hexa::after {
left: -40px;
top: -50px;
border-width: 30px 40px;
border-top-width: 0;
border-color: #2ECC40 transparent;
}
.hexa::before {
left: -40px;
top: 20px;
border-width: 30px 40px;
border-bottom-width: 0;
border-color: #2ECC40 transparent;
}
.penta {
top: 20px;
left: 160px;
border: 50px solid;
border-top-width: 0;
border-color: #ff4136 transparent;
}
.penta::before {
top: 50px;
left: -50px;
width: 50px;
border-width: 50px 25px;
border-bottom-width: 0;
border-color: #ff4136 transparent;
}
.rhomba {
left: 50px;
bottom: 20px;
border: solid;
border-width: 50px 30px;
border-left-width: 0;
border-color: transparent #ffdc00;
}
.rhomba::before {
left: 30px;
top: -50px;
border-width: 50px 30px;
border-right-width: 0;
border-color: transparent #ffdc00;
}
.octa {
right: 45px;
bottom: 20px;
width: 90px;
height: 95px;
border: transparent ;
overflow: hidden;
}
.octa::after {
top: -90px;
left: -20px;
width: 30px;
height: 90px;
border-width: 50px 50px;
border-top-width: 0;
border-color: #7FDBFF transparent;
}
.octa::before {
top: 50px;
left: -15px;
width: 20px;
height: 90px;
border-width: 50px 50px;
border-bottom-width: 0;
border-color: #7FDBFF transparent;
}