HTML5 logo bottom right corner

by nottrobin

HTML

<div class="l1">
    <div class="l2">
        <div class="l3"></div>
    </div>
</div>

CSS

div.l1 {
    background-color: #e44c27;
    width: 400px;
    height: 200px;
    position: relative;
}
div.l1:after {
    position: absolute;
    content: '';
    bottom: -100px;
    display: block;
    border-top: 100px solid #e44c27;
    border-right: 400px solid transparent;
}
div.l1:before {
    position: absolute;
    right: -20px;
    content: '';
    display: block;
    border-left: 20px solid #e44c27;
    border-bottom: 200px solid transparent;
}
div.l2 {
    background-color: #f0652a;
    width: 240px;
    height: 120px;
    position: relative;
}
div.l2:after {
    position: absolute;
    content: '';
    bottom: -60px;
    display: block;
    border-top: 60px solid #f0652a;
    border-right: 240px solid transparent;
}
div.l2:before {
    position: absolute;
    right: -12px;
    content: '';
    display: block;
    border-left: 12px solid #f0652a;
    border-bottom: 120px solid transparent;
}