Let's break it into pieces:
The yellow borders are actually set as transparent in the final product so they don't show. They are yellow here to show how the borders look.
As commented above, this answer shows the idea behind the basic triangle shape.
The div by itself:
Combining the :before pseudo element is the same as this:
Finally, combining the :after pseudo element is the same as this:
Now you overlap each element precisely using position: absolute; and rotate with transform as needed to get the final product:
Let's visualise it!
