そうです。最近個人的に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: ""; } }
今回は以上です。