CSS - 鉛筆アイコン

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

HTMLコードは鉛筆型のアイコンを描画する要素となる<div>タグのクラス名 "pencil-icon" を設定しています。
各パーツは３つの子要素として<div>タグで設置しています。

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

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

各パーツはnth-child()を利用して個別に形状や色、サイズと位置を調節しています。

/* 鉛筆アイコン */
.pencil-icon {
	--w: 300px; /* 基本サイズ */
	--angle: 0deg; /* 回転 */
	--angle: 40deg;
	position: relative;
	width: var(--w);
	height: var(--w);
	transform: rotate(var(--angle));
}


/* 棒の部分 */
.pencil-icon div:nth-child(1) {
	position: absolute;
	left: 50%;
	top: 5%;
	transform: translateX(-50%);
	width: 20%;
	height: 70%;
	background-color: #004d00;
}


/* 先端部分A */
.pencil-icon div:nth-child(2) {
	position: absolute;
	top: 75%;
	left: 40%;
	width: 20%;
	border-bottom: calc(var(--w) * 0.2) solid #deb887;
	border-right: calc(var(--w) * 0.1) solid transparent;
	border-left: calc(var(--w) * 0.1) solid transparent;
	box-sizing: border-box;
	transform: rotate(180deg);
}

/* 先端部分B */
.pencil-icon div:nth-child(3) {
	position: absolute;
	top: 87%;
	left: 46%;
	border-bottom: calc(var(--w) * 0.08) solid #004d00;
	border-right: calc(var(--w) * 0.04) solid transparent;
	border-left: calc(var(--w) * 0.04) solid transparent;
	box-sizing: border-box;
	transform: rotate(180deg);
}