CSS - 消しゴムアイコン

HTMLとCSSを使用して消しゴムアイコンを描画する方法のコード例です。

HTMLコードは消しゴムを描画する要素となる<div>タグのクラス名 "eraser-icon" を設定しています。
消しゴム部分の子要素<div>タグでクラス名「eraser-icon-body」、下線部分には「eraser-icon-underline」を指定しています。

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

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

消しゴム部分の上部は疑似要素「before」を使って描画しています。

/* 消しゴムアイコン */
.eraser-icon {
	--w: 300px; /* 基準サイズ */
	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;
}

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