css shapes :: triangle

dabblet.css

/**
 * css shapes :: triangle
 */
.triangles{
	position: realative;
	background: red;
	display: block;
}
.triangles > span{
	position: relative;
	width: 150px;
}
.triangle-up{
	position: relative;
	left: 50px;
	border-bottom: 100px solid steelblue;
	border-right: 50px solid transparent;
	border-left: 50px solid transparent;
}
.triangle-down{	
	position: relative;
	left: 20px; 
	top: 120px;
	border-top: 100px solid steelblue;
	border-right: 50px solid transparent;
	border-left: 50px solid transparent;
}
.triangle-left{	
	position: relative;
	left: 20px;
	top: 70px;
	border-right: 100px solid steelblue;
	border-top: 50px solid transparent;
	border-bottom: 50px solid transparent;
}
.triangle-right{	
	position: relative;
	left: 40px;
	top: 70px;
	border-left: 100px solid steelblue;
	border-top: 50px solid transparent;
	border-bottom: 50px solid transparent;
}

dabblet.html

<div class='triangles'>
	<span class='triangle-up'></span>
	<span class='triangle-down'></span>
	<span class='triangle-left'></span>
	<span class='triangle-right'></span>
</div>

settings.json

{"view":"separate","fontsize":"60","seethrough":"","prefixfree":"1","page":"all"}