cssのみで「クローン・トルーパー」アイコンを作成してみました。
今回も、これが精一杯です。ご了承ください。
おそらく「クローン・トルーパー」と書いてないとなんだかわかんないような・・・
もっと絵心つけないと、なかなか表現するのが難しいですね。
「ストーム・トルーパー」も作りたいですが難しそうです。
ソース
html
<div id="clone_troopers"> <div id="clone_troopers_shield"></div> <div id="clone_troopers_helmet_left"></div> <div id="clone_troopers_helmet_right"></div> <div id="clone_troopers_helmet_btm"></div> </div>
css
/* ヘルメット */ #clone_troopers { font-size: 100px; position: relative; margin: 0.1em auto; width: 1.0em; height: 1.1em; background-color: #ddd; border-radius: 0.5em; } #clone_troopers::before { position: absolute; content: ""; top: 0.4em; left: -0.05em; width: 1.1em; height: 0.8em; background-color: #ddd; border-radius: 0.1em 0.1em 0 0; } #clone_troopers::after { position: absolute; content: ""; top: 1.2em; left: -0.05em; width: 0.5em; height: 0; border-left: 0.3em solid transparent; border-right: 0.3em solid transparent; border-top: 0.2em solid #ddd; } /* シールド・ツノ */ #clone_troopers_shield { position: absolute; top: 0.5em; left: 0; width: 1.0em; height: 0.05em; background-color: #111; z-index: 1; } #clone_troopers_shield::before { position: absolute; content: ""; top: 0.1em; left: 0; width: 1.0em; height: 0.5em; background-color: #111; } #clone_troopers_shield::after { position: absolute; content: ""; top: -0.55em; left: 0.45em; width: 0.1em; height: 0.3em; background-color: #ddd; box-shadow: 0 -1px 0 1px #aaa; } /* ヘルメット左 */ #clone_troopers_helmet_left { position: absolute; top: 0.65em; left: 0; width: 0.4em; height: 0.35em; border-top: 0.1em solid transparent; border-bottom: 0em solid transparent; border-left: 0.4em solid #ddd; z-index: 2; } #clone_troopers_helmet_left::before { position: absolute; content: ""; top: 0em; left: -0.4em; width: 0; height: 0.1em; border-top: 0.1em solid transparent; border-bottom: 0em solid transparent; border-left: 0.35em solid #bbb; } /* ヘルメット右 */ #clone_troopers_helmet_right { position: absolute; top: 0.65em; left: 0.2em; width: 0.4em; height: 0.35em; border-top: 0.1em solid transparent; border-bottom: 0em solid transparent; border-right: 0.4em solid #ddd; z-index: 2; } #clone_troopers_helmet_right::before { position: absolute; content: ""; top: 0em; left: 0.45em; width: 0; height: 0.1em; border-top: 0.1em solid transparent; border-bottom: 0em solid transparent; border-right: 0.35em solid #bbb; } /* ヘルメット下 */ #clone_troopers_helmet_btm { position: absolute; top: 1.05em; left: 0.25em; width: 0.4em; height: 0.4em; border-top: 0.05em solid #111; border-left: 0.05em solid #111; border-bottom: 0.05em solid transparent; border-right: 0.05em solid transparent; -webkit-transform: rotate(45deg); transform: rotate(45deg); border-radius: 0.1em; z-index: 3; } #clone_troopers_helmet_btm::before { position: absolute; content: ""; top: 0.2em; left: 0.2em; width: 0.1em; height: 0.1em; background-color: #222; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }