After experimenting with a demo I discovered at the following link: http://codepen.io/singhiskng/pen/dqiGj
My goal is to create a four-sided pyramid.
<div id="pyramid-container">
<div id="pyramid">
<div class="face" id="front" ></div>
<div class="face" id="back" ></div>
<div class="face" id="left" ></div>
<div class="face" id="right" ></div>
</div>
</div>
While I have successfully aligned the four sides, I am now hoping to add a base beneath them. I have tried to utilize a pseudo-element, create a square shape, and rotate it by 90 degrees. However, it does not seem to be appearing on the screen, and I am unsure of the reason:
#front::after{
width:50px;
height:50px;
border-width:0;
background-color:rgba(147,81,166,0.9);
-webkit-transform:rotateX(90deg);
-moz-transform:rotateX(90deg);
}
For reference, here is the link to my attempt: http://jsfiddle.net/r5Xjq/1/
It's worth noting that I have applied a 45-degree rotation to #pyramid in order to tilt the pyramid and view it from underneath.