cssのみで「R2-D2」アイコンを作成してみました。
自分の絵心の無さにビックリしています。ご了承ください。
ず~~~っと、「アストロドロイド」だと思っていたら、「アストロメク・ドロイド」だそうです。
「メク」って付くのしりませんでした。
「R2-D2」といったら相棒の「C-3PO」ですが、こちらも自分の絵心の無さからかなり難航しております。
なかなかひどい状況です・・・
もう少しまともになったらUPしようと思いますが、まだまだかかりそうです。
ソース
html
<div id="r2-d2"> <div id="r2-d2_lens"></div> <div id="r2-d2_lens2"></div> <div id="r2-d2_lens3"></div> </div>
css
/* 頭背景 */ #r2-d2 { font-size: 100px; position: relative; margin: 0.4em auto; width: 1.4em; height: 0.8em; background-color: #ddd; border-radius: 1.8em 1.8em 0 0; overflow: hidden; } #r2-d2::before { position: absolute; content: ""; top: -0.35em; left: 0.3em; width: 0.8em; height: 0.5em; background-color: #3959a4; border-radius: 100%; } #r2-d2::after { position: absolute; content: ""; top: 0; left: 0.675em; width: 0.05em; height: 0.2em; background-color: #ddd; } /* レンズ */ #r2-d2_lens { position: absolute; top: 0.2em; left: 0.45em; width: 0.5em; height: 0.4em; background-color: #3959a4; border-radius: 0.1em; z-index: 1; } #r2-d2_lens::before { position: absolute; content: ""; top: 0.05em; left: 0.1em; width: 0.3em; height: 0.3em; background-color: #333; border-radius: 100%; } /* レンズ2 */ #r2-d2_lens2 { position: absolute; top: 0.65em; left: 0.65em; width: 0.25em; height: 0.15em; background-color: #3959a4; z-index: 1; } #r2-d2_lens2::before { position: absolute; content: ""; top: 0.025em; left: 0.075em; width: 0.1em; height: 0.1em; background-color: #f00; border-radius: 100%; } #r2-d2_lens2::after { position: absolute; content: ""; top: 0; left: -0.15em; width: 0.1em; height: 0.15em; background-color: #3959a4; } /* レンズ3 */ #r2-d2_lens3 { position: absolute; top: 0.65em; left: 0em; width: 0.2em; height: 0.15em; background-color: #3959a4; box-shadow: 0.25em 0 0 0 #3959a4, 1.2em 0 0 0 #3959a4; z-index: 1; } #r2-d2_lens3::before { position: absolute; content: ""; top: -0.05em; left: 0.95em; width: 0.2em; height: 0.2em; background-color: #999; border-radius: 100%; }