Zelda's triforce, created solely with html and css, combined with the use of :before and :after pseudo elements, I've created my initial proof of concept. Your comments and feedback are appreciated

index.html

<div id="triforce">
      <div id="triangle" class="shadow">
        <div id="shadow"></div>
      </div>

style.css

#triforce{
  margin:0px auto;
  width:200px;
	height:200px;
}
#triangle{
	content:'';
	position:relative;
	width:0px;
	height:0px;
	border-left: 60px solid transparent;
	border-right: 60px solid transparent;
	border-bottom: 104px solid #FFBC00;
}
#triangle:before{
	content:'';
	position:absolute;
	display:block;
	border-left:60px solid transparent;
	border-right:60px solid transparent;
	border-bottom:104px solid #FFBC00;
	top:104px;
	left:-120px;
}
#triangle:after{
	content:'';
	position:absolute;
	display:block;
	border-left:60px solid transparent;
	border-right:60px solid transparent;
	border-bottom:104px solid #FFBC00;
	top:104px;
}
#shadow{
	content:'';
	width:0px;
	height:0px;
	position:relative;
	z-index:-1;
	border-left:60px solid transparent;
	border-right:60px solid transparent;
	border-top:104px solid #FF8C00;
	transform:rotate(60deg);
	-webkit-transform:rotate(60deg);
	-moz-transform:rotate(60deg);
	-ms-transform:rotate(60deg);
	-o-transform:rotate(60deg);
	top:27px;
	left:-73px;
}
#shadow:before{
	content:'';
	border-left:60px solid transparent;
	border-right:60px solid transparent;
	border-top:104px solid #FF8C00;
	position:absolute;
	display:block;
	top:0px;
	left:0px;
}
#shadow:after{
	content:'';
	border-left:60px solid transparent;
	border-right:60px solid transparent;
	border-top:104px solid #FF8C00;
	position:absolute;
	display:block;
	top:-104px;
	left:60px;
}