CSS - 爆弾アイコン

HTMLとCSSを使用してシンプルな爆弾アイコンを描画する方法のコード例です。

HTMLコードは爆弾アイコンを描画する要素となる<div>タグのクラス名 "bomb-icon" を設定しています。
各パーツは<div>タグで指定、順番は爆弾本体、突起、導火線 A Bとなっています。

<div class="bomb-icon">
	<div></div>
	<div></div>
	<div></div>
	<div></div>
</div>

CSSカスタムプロパティで基準値とする図形の横幅「--w」を指定しています。
「--angle」では要素の回転を指定できます。

「border-radius」プロパティで丸くする角を限定します。
「border-bottom」を「0」を指定して直線部分のボーダーを無くしています。

/* 爆弾アイコン */
.bomb-icon {
	--w: 300px; /* 基準値とする横幅 */
	--angle: 0deg; /* 回転 */
	position: relative;
	width: var(--w);
	height: var(--w);
	transform: rotate(var(--angle));
}

/* 爆弾本体 */
.bomb-icon div:nth-child(1) {
	position: absolute;
	top: 20%;
	left: 10%;
	width: 70%;
	height: 70%;
	background-color: #606060;
	border-radius: 50%;
}

/* 爆弾の突起部分 */
.bomb-icon div:nth-child(2) {
	position: absolute;
	top: 20%;
	left: 55%;
	width: 15%;
	height: 10%;
	background-color: #606060;
	transform: rotate(30deg);
}

/* 爆弾の導火線 A */
.bomb-icon div:nth-child(3) {
	position: absolute;
	top: 16%;
	left: 63%;
	width: 20%;
	height: 10%;
	border: solid calc(var(--w) * 0.05) #606060;
	border-radius: calc(var(--w) * 0.5) calc(var(--w) * 0.5) 0 0;
	border-bottom: 0;
	box-sizing: border-box;
	transform: rotate(25deg);
}

/* 爆弾の導火線B */
.bomb-icon div:nth-child(4) {
	position: absolute;
	top: 30%;
	left: 73%;
	width: 20%;
	height: 10%;
	border: solid calc(var(--w) * 0.05) #606060;
	border-radius: 0 0 calc(var(--w) * 0.5) calc(var(--w) * 0.5);
	border-top: 0;
	box-sizing: border-box;
	transform: rotate(25deg);
}