最近個人的に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; } }
ちょっとラインが下に詰まってしまいました。
今回は以上です。