CSS responsive triangles using one div

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

by Glynne Turner

CSS

/*Down-right pointing*/
.triangle-down-right { 
    width: 250px;
    height: 0;
    padding-top: 250px;
    overflow: hidden;
    position:absolute;
    bottom:0;
    right:0;
}
.triangle-down-right:after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    margin-top:-500px;
    
    border-top: 500px solid transparent;
    border-right: 500px solid #4679BD;
}