CSS responsive triangles down

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

by josedvq

HTML

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

CSS

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