CSSでオンガクスリのロゴを真似る

そうです。最近個人的にCSS熱が高まってきていま（略）
今回は「いま一番必要な音楽と出会えるサービス」こと オンガクスリ のロゴをつくってみたいとおもいます。

今回は、ongakusuriタグというタグをつくり、そのタグのスタイルを調整するという方針にしてみました。
1つのタグでできているとことがポイントです。（しっかり擬似要素はつかってますが。）

DEMO

HTML

<ongakusuri class="adjust" onclick="window.open('http://ongakusuri.com/')"></ongakusuri>

JavaScript

document.createElement("ongakusuri");

SCSS

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

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

ongakusuri {
    display: block;
    position: relative;
    border-radius: 50% 0 0 50%;
    width: 135px; height: 120px;
    background: #ff746f;
    cursor: pointer;
    
    &:before {
        display: block;
        position: relative;
        top: 0; left: 135px;
        border-radius:  0 50% 50% 0;
        width: 135px; height: 120px;
        content: "";
        background: #91dbe4;
    }
        
    &:after {
        display: block;
        position: absolute;
        top: 50%; left: 50%;
        margin: -35px 0 0 40px;
        border: solid transparent 70px;
        border-top-width: 35px;
        border-bottom-width: 35px;
        border-left-color: #fff;
        width: 0; height: 0;
        content: "";
    }
}

今回は以上です。

http://ongakusuri.com/
http://ongakusuri.com/