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-up"><div></div></div>

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

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

CSS

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

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

.triangle-down{
    width: 25%;
    height: 0;
    padding-left:25%;
    padding-top: 25%;
    overflow: hidden;
}
.triangle-down div {
    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;
}

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