CSS - Pencil Icon

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

The HTML code sets the class name "pencil-icon" for the <div> tag which will make up the pencil icon element.
The parts are set up as 3 child <div> elements.

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

The CSS custom property "--w" sets the base width for the icon shape.

The parts are individually styled using nth-child() to adjust the shapes, colors, sizes and positions.

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


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


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

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