3D Pyramid with CSS

I need to create this figure with CSS. Taking into account that there must be 3 different elements to be able to work on each independently. I have knowledge to create a trangulo but I am stuck on how to join the 3 that I need.

<div class="triangle"></div>    

.triangle{
  width: 0;
  height: 0;
  border-width: 0 176px 217px 0;
  border-color: transparent #FF0000 transparent transparent;
  border-style: solid;
  -webkit-transform: rotate(24deg);
  -moz-transform: rotate(24deg);
  transform: rotate(24deg);
}

Any ideas? Thanks