How to make a pyramid in CSS+HTML?

The essence of my question. Decided to draw a tetrahedron on CSS+HTML.
Painted sides, in the sides of the triangles. Added the boarders that would make it more evident. Turned side. But a recent discovery for me was that the sides can not be tilted as I need. When using 3d the blocks can't nalaziti each other...And necessary. I want to ask ideas. Tomatoes please do not throw.
<div class="wrapper">
 <div id="pyramid">
 <div class="side1 sides">
 <div class="sideSquare"></div>
 <div class="inscription">Hello</div>
</div>
 <div class="side2 sides">
 <div class="sideSquare"></div>
 <div class="inscription">Hello</div>
</div>
 <div class="side3 sides">
 <div class="sideSquare"></div>
 <div class="inscription">Hello</div>
</div>
 <div class="side4 sides">
 <div class="sideSquare"></div>
 <div class="inscription">Hello</div>
</div>
</div>
</div>

.wrapper {
 perspective: 900px;
 padding-top: 200px;
}
#pyramid {
 margin:0 auto;
 width: 200px;
 height: 200px;
 position: relative;
 transform-origin: 50% 50% 100px;
 transform-style: preserve-3d;
 transform: rotate3d(1,1,1,0 deg);
}
.sides {
 transform-origin: 50% 200px -57.736 px;
 border: 2px solid #000;
}
.side2 {
 transform: rotateX(70.529 deg) rotateZ(0deg) rotateY(120deg);
}
.side1 {
 transform: rotateX(70.529 deg) rotateY(0deg) rotateZ(0deg);
}
.side3 {
 transform: rotateX(70.529 deg) rotateY(240deg) rotateZ(0deg);
}
.side4 {
 display: none;
}


b4bb12eef88b4f2ca022b0cd5249b9a9.jpg
July 9th 19 at 13:58
3 answers
July 9th 19 at 14:00
Maybe we should set blocks position: absolute?

Problema not clear, as the picture does not reflect it.
July 9th 19 at 14:02
Need to turn X-axis on each side (around the axis which runs from the lower base of each triangle).
July 9th 19 at 14:04
on the codepen posted!

Find more questions by tags GeometryCSSHTML