CSS - Bomb Icon

Code example for drawing a simple bomb icon using HTML and CSS.

The HTML code sets the class name "bomb-icon" for the <div> tag which will make up the bomb icon element.
The parts are specified with <div> tags, in order: bomb body, protrusion, fuse A, fuse B.

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

The CSS custom property "--w" sets the base width for the icon shape.
"--angle" allows rotating the element.

"border-radius" limits the rounded corners.
"border-bottom: 0" removes the straight border section.

/* Bomb Icon */
.bomb-icon {
	--w: 300px; /* Base Size */
	--angle: 0deg; /* Rotation */
	position: relative;
	width: var(--w);
	height: var(--w);
	transform: rotate(var(--angle));
}

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

/* Bomb Protrusion */
.bomb-icon div:nth-child(2) {
	position: absolute;
	top: 20%;
	left: 55%;
	width: 15%;
	height: 10%;
	background-color: #606060;
	transform: rotate(30deg);
}

/* Fuse 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);
}

/* Fuse 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);
}