ボバ・フェット – css Boba Fett –

cssのみで 「ボバ・フェット」アイコンを作成してみました。
突っ込みどころはいっぱいありますが、ご了承ください。
もっと簡単に出来ればいいのですが、さすがにdiv1つでは無理でした。
「ボバ・フェット」はスターウォーズの中で好きなキャラクターの1つです。
サーラックに呑み込まれたのが最後だと思ってたらwikipediaでその後助かったのを知りました･･･
早くエピソード7観たいですね。

ソース

html

<div id="boba_fett">
  <div id="boba_shield"></div>
  <div id="boba_helmet_left"></div>
  <div id="boba_helmet_right"></div>
  <div id="boba_antenna"></div>
</div>

css

/* ヘルメット */
#boba_fett {
	font-size: 100px;
	position: relative;
	margin: 0.3em auto;
	width: 1.0em;
	height: 1.1em;
	background-color: #617a65;
	border-radius: 0.5em;
}
/* シールド枠 */
#boba_fett::before {
	position: absolute;
	content: "";
	top: 0.4em;
	left: 0;
	width: 1em;
	height: 0.4em;
	background-color: #7d1f1d;
}
/* シールド枠 */
#boba_fett::after {
	position: absolute;
	content: "";
	top: 0.8em;
	left: 0;
	width: 0.5em;
	height: 0;
	border-left: 0.25em solid transparent;
	border-right: 0.25em solid transparent;
	border-top: 0.32em solid #7d1f1d;
}
/* シールド */
#boba_shield {
	position: absolute;
	top: 0.5em;
	left: 0.1em;
	width: 0.8em;
	height: 0.1em;
	background-color: #111;
	z-index: 1;
}
#boba_shield::before {
	position: absolute;
	content: "";
	top: 0.1em;
	left: 0.3em;
	width: 0.2em;
	height: 0.52em;
	background-color: #111;
}
/* ヘルメット左 */
#boba_helmet_left {
	position: absolute;
	top: 0.7em;
	left: 0;
	width: 0.3em;
	height: 0.2em;
	border-radius: 0 0.5em 0 0 / 0.5em 0.5em 0.5em 0;
	background-color: #455247;
	z-index: 2;
}
#boba_helmet_left::before {
	position: absolute;
	content: "";
	top: 0.2em;
	left: 0;
	width: 0;
	height: 0;
	border-top: 0.26em solid #617a65;
	border-left: 0.3em solid transparent;
}
#boba_helmet_left::after {
	position: absolute;
	content: "";
	top: 0.05em;
	left: 0;
	width: 0.3em;
	height: 0.15em;
	background-color: #617a65;
	border-radius: 0.15em 0.15em 0 0;
}
/* ヘルメット右 */
#boba_helmet_right {
	position: absolute;
	top: 0.7em;
	left: 0.7em;
	width: 0.3em;
	height: 0.2em;
	border-radius: 0.5em 0 0 0 / 0.5em 0 0.5em 0.5em;
	background-color: #455247;
	z-index: 2;
}
#boba_helmet_right::before {
	position: absolute;
	content: "";
	top: 0.2em;
	left: 0;
	width: 0;
	height: 0;
	border-top: 0.26em solid #617a65;
	border-right: 0.3em solid transparent;
}
#boba_helmet_right::after {
	position: absolute;
	content: "";
	top: 0.05em;
	left: 0;
	width: 0.3em;
	height: 0.15em;
	background-color: #617a65;
	border-radius: 0.15em 0.15em 0 0;
}
/* アンテナ */
#boba_antenna {
	position: absolute;
	top: 0.4em;
	left: -0.05em;
	width: 0.05em;
	height: 0.5em;
	background-color: #7d551d;
	box-shadow: 1.05em 0 0 0 #617a65;
	z-index: 3;
}
#boba_antenna::before {
	position: absolute;
	content: "";
	top: -0.6em;
	left: 0;
	width: 0.05em;
	height: 0.6em;
	background-color: #bbb;
}
#boba_antenna::after {
	position: absolute;
	content: "";
	top: -0.6em;
	left: 0;
	width: 0.2em;
	height: 0.1em;
	background-color: #333;
}