How to make a tetrahedron?

I am trying to make a CSS tetrahedron, so I have tackled the problem by doing some CSS3 triangles and activating the 3D transformations with the perspective property.

But I have some issues to wrap my mind over all the transformations, here is some of my code:

.navbar-brand-logo {
  width: 64px;
  height: 64px;
  transform-style: preserve-3d;
  perspective: 600px;
  position: relative;
}
.face {
  width: 0;
  height: 0;
  position: absolute;
  border-style: solid;
  border-width: 64px 32px 0 32px;
  transform-origin: 0 0;
  border-color: transparent transparent transparent rgba(50, 50, 50, 0.6);
}
.logo-base-left {
  transform: rotateX(180deg) translateY(-64px);
}
.logo-base-right {
  transform: rotateY(180deg) rotateX(180deg) translateY(-64px);
}
.logo-up {
  border-color: transparent transparent transparent rgba(50, 50, 50, 0.8);
  transform: rotateY(180deg) scaleY(0.5) translateY(-64px);
}
.logo-down-up {
  border-color: transparent transparent transparent rgba(50, 50, 50, 0.9);
  border-width: 64px 0 0px 4px;
  transform: scaleX(128px) translateZ(0px);
}

<section class="navbar-brand-logo">
  <figure class="face logo-base-left"></figure>
  <figure class="face logo-base-right"></figure>
  <figure class="face logo-up"></figure>
  <figure class="face logo-down-up"></figure>
</section>

I am having issues to imagine how can I make the two other faces (the left up one and the right one).

Here is a CodePen which illustrate the current attempt:

Furthermore, is it a good idea to use a CSS3 tetrahedron as a logo? Would it be better if it was an SVG?

WebGL / Canvas is a no-no due to browser support.

Solution

If you want to animate the logo (once, on hover, doesn't matter), then going with 3D CSS is probably a good idea.

With SVG, you would get better browser support, faster rendering, and easier control over the shape, so if you're not animating the logo I'd suggest going with SVG.

For building the shape of a tetrahedron in 3D, check out Ana Tudor's codepen, this is but one of many tetrahedron examples she's made: http://codepen.io/thebabydino/pen/vFrHx – you can play with the animation rot in this pen to get an idea of how to rotate / animate it.