CSSでGoogleスプレッドシートのアイコンを真似る

本邦初公開の情報ですが、最近個人的にCSS熱が高まってきています。
今回は習作としてGoogleスプレッドシートのアイコンをつくってみました。

DEMO

HTML

<div class="sheet 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;
}

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

.header {
    width: 55px; height: 30px;
    border-radius: 8px 0 0 0;
    background: #109d58;
    
    &:before {
        display: block;
        position: absolute;
        top: 0; right: 0;
        border: solid transparent 15px;
        border-left-color: #7bcaaa;
        border-bottom-color: #7bcaaa;
        width: 0; height: 0;
        content: "";
    }
        
     &:after {
        display: block;
        position: absolute;
        top: 30px; right: 0;
        border: solid transparent 15px;
        border-top-color: #0c7743;
        border-right-color: #0c7743;
        width: 0; height: 0;
        content: "";
     }
}

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

    .line {
        position: absolute;
        top: 45px; left: 50%;
        margin-left: -8px;
        width: 4px; height: 40px;
        background: #fff;

        &:before {
            display: block;
            position: absolute;
            top: 12px; left: -20px;
            width: 56px; height: 4px;
            content: "";
            background: #fff;
        }

         &:after {
            display: block;
            position: absolute;
            top: 24px; left: -20px;
            width: 56px; height: 4px;
            content: "";
            background: #fff;
        }
    }
    
     &:after {
        display: block;
        position: absolute;
        bottom: 20px; left: 50%;
        margin-left: -28px;
        border: solid #fff 4px;
        width: 48px; height: 32px;
        content: "";
    }
}