CSS responsive triangle up

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

by josedvq

HTML

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

CSS

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