CSS responsive triangles

Pure CSS responsive triangles set to 50% base as described on http://codeitdown.com/pure-css-responsive-triangles

by josedvq

HTML

<div class="triangle-left-single"></div>

CSS

.triangle-left-single {
	width: 25%;
	height: 0;
	padding-top: 25%;
	padding-bottom: 25%;
	overflow: hidden;
}
.triangle-left-single:after {
	content: "";
	display: block;
	width: 0; 
	height: 0;
	margin-top:-500px;
	
	border-top: 500px solid transparent;
	border-bottom: 500px solid transparent;
	border-right: 500px solid #4679BD;
}