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 moob

HTML

<div class="trangle-thing">
    <p>Obtuse</p>
    <div class="trangle-thing-down"></div>
</div><!--

--><div class="trangle-thing">
    <p>Acute</p>
    <div class="trangle-thing-down-deep"></div>
</div>

CSS

.trangle-thing {
    display:inline-block; margin:5%;
    width: 40%;
    background:#ccc;
    position:relative;
    box-sizing:border-box;
    vertical-align:top;
}
.trangle-thing p {
    margin:0px;
    padding:10px;
}
.trangle-thing-down {
    display:block;
    position:absolute;
    top:100%;
    width:100%;
    left:0; right:0;
    height: 0;
    padding-left:50%;
    padding-top: 25%;
    overflow: hidden;
}
.trangle-thing-down:after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    margin-left:-500px;
    margin-top:-250px;    
    border-left: 500px solid transparent;
    border-right: 500px solid transparent;
    border-top: 250px solid #ccc;
}





.trangle-thing-down-deep {
    display:block;
    position:absolute;
    top:100%;
    width:100%;
    left:0; right:0;
    height: 0;
    padding-left:50%;
    padding-top: 75%;
    overflow: hidden;
}
.trangle-thing-down-deep:after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    margin-left:-500px;
    margin-top:-750px;    
    border-left: 500px solid transparent;
    border-right: 500px solid transparent;
    border-top: 750px solid #ccc;
}