CSS - Eraser Icon

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

The HTML code sets the class name "eraser-icon" for the <div> tag which will make up the eraser icon element.
It uses child elements "eraser-icon-body" for the eraser and "eraser-icon-underline" for the line.

<div class="eraser-icon">
	<div class="eraser-icon-body"></div>
	<div class="eraser-icon-underline"></div>
</div>

The CSS custom property "--w" sets the base size.

The eraser top uses ::before pseudo element.

/* Eraser Icon */
.eraser-icon {
	--w: 300px; /* Base Size */
	position: relative;
	width: var(--w);
	height: var(--w);
}

/* Body */
.eraser-icon-body {
	position: absolute;
	top: 10%;
	left: 25%;
	width: 48%;
	height: 80%;
	background-color: #ff6347;
	border-radius: 10%;
	transform: rotate(45deg);
}

.eraser-icon-body::before {
	content: "";
	position: absolute;
	width: 100%;
	height: 55%;
	border-radius: 10% 10% 0 0;
	background-color: #4169e1;
}

/* Underline */
.eraser-icon-underline {
	position: absolute;
	top: 90%;
	left: 5%;
	width: 90%;
	height: 3%;
	background-color: #d3d3d3;
}