• HTML
• CSS

HTML

<div class="triangulo arriba"></div>
<div class="triangulo derecha"></div>
<div class="triangulo abajo"></div>
<div class="triangulo izquierda"></div>

CSS

.triangulo{
	width:0px;
 	height:0px;
}
.arriba{
 	border-right: solid 50px transparent; /* lado del triangulo */
 	border-bottom: solid 50px #2F2F2F; /* definimos el color */
 	border-left: solid 50px transparent; /* lado del triángulo */
}
.derecha{
 	border-top:50px solid transparent;
 	border-bottom:50px solid transparent;
 	border-left:50px solid #2F2F2F;
}
.abajo{
 	border-top: solid 50px #2F2F2F;
 	border-right: solid 50px transparent;
 	border-left: solid 50px transparent;
}
.izquierda{
 	border-top: solid 50px transparent;
 	border-bottom: solid 50px transparent;
 	border-right: solid 50px #2F2F2F;
}