CSSでGoogleドキュメントのアイコンを真似る

最近個人的にCSS熱が高まってきています。
今回は習作としてGoogleドキュメントのアイコンをつくってみました。

DEMO

HTML

<div class="note adjust">
    <div class="header"></div>
    <div class="body">
        <div class="line"></div>
    </div>    
</div>

SCSS

@import "compass/reset";

html, body {
    height: 100%;
    background: #f3f3f3;
}

.adjust {
    position: absolute;
    top: 50%; left: 50%;
    margin: -42.5px 0 0 -37.5px;
}

.note {
    position: relative;
    width: 85px;
}

.header {
    width: 55px; height: 30px;
    border-radius: 8px 0 0 0;
    background: #3a81f7;
    
    &:before {
        display: block;
        position: absolute;
        top: 0; right: 0;
        border: solid transparent 15px;
        border-left-color: #a0c2ff;
        border-bottom-color: #a0c2ff;
        width: 0; height: 0;
        content: "";
    }
        
     &:after {
        display: block;
        position: absolute;
        top: 30px; right: 0;
        border: solid transparent 15px;
        border-top-color: #255bb5;
        border-right-color: #255bb5;
        width: 0; height: 0;
        content: "";
     }
}

.body {
    height: 75px;
    border-radius: 0 0 8px 8px;
    background: #3a81f7;
    box-shadow: 0 2px 2px rgba(0, 0, 0, .2);

    .line {
        position: absolute;
        top: 60px; left: 50%;
        margin-left: -26px;
        width: 52px; height: 4px;
        background: #fff;
        
        &:before {
            display: block;
            position: absolute;
            top: -12px;
            width: 52px; height: 4px;
            content: "";
            background: #fff;
        }

         &:after {
            display: block;
            position: absolute;
            top: 12px;
            width: 52px; height: 4px;
            content: "";
            background: #fff;
        }
    }
    
     &:after {
        display: block;
        position: absolute;
        bottom: 17px; left: 50%;
        margin-left: -26px;
        width: 30px; height: 4px;
        content: "";
        background: #fff;
    }
}