CSS responsive triangles

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

HTML

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

CSS

.triangle-down{
    width: 25%;
    height: 0;
    padding-left:25%;
    padding-top: 25%;
    overflow: hidden;
}
.triangle-down div {
    width: 0;
    height: 0;
    margin-left:-100px;
    margin-top:-100px;
    
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
    border-top: 100px solid #4679BD;
}