本邦初公開の情報 ですが、最近個人的に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: ""; } }
たまにはこんな日もありますね。
今回は以上です。