CSS - Cursor Icon

Code example for drawing a mouse cursor icon using HTML and CSS.

This HTML code sets the class name "cursor-icon" on the <div> tag that will draw the cursor icon.

It has two child <div> elements for the triangular part and the core part.

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

The first child <div> uses the pseudo elements "before" and "after" to create the left and right triangles.

The CSS custom property "--w" specifies the reference width for the shape.
"--w" is used to calculate values needed for the cursor icon shape.

It also uses the custom property "--angle" to allow rotating the cursor icon.

/* Container */
.cursor-icon {
	--w: 300px; /* Base Size */
	--angle: -45deg; /* Rotation */
	position: relative;
	width: var(--w);
	height: var(--w);
}

/* Left and Right Triangles */
.cursor-icon div:nth-child(1) {
	position: absolute;
	width: var(--w);
	height: var(--w);
	transform: rotate(var(--angle));
}

/* Left Triangle */
.cursor-icon div:nth-child(1)::before {
	content: "";
	position: absolute;
	top: 5%;
	left: 14.5%;
	border-bottom: calc(var(--w) * 0.5) solid #ff5500;
	border-right: calc(var(--w) * 0.25) solid transparent;
	border-left: calc(var(--w) * 0.25) solid transparent;
	transform: rotate(-26.5deg) skew(-44.5deg);
}

/* Right Triangle */
.cursor-icon div:nth-child(1)::after {
	content: "";
	position: absolute;
	top: 5%;
	left: 35.5%;
	border-bottom: calc(var(--w) * 0.5) solid #ff5500;
	border-right: calc(var(--w) * 0.25) solid transparent;
	border-left: calc(var(--w) * 0.25) solid transparent;
	transform: rotate(26.5deg) skew(44.5deg);
}

/* Bottom part */
.cursor-icon div:nth-child(2) {
	position: absolute;
	top: 30%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 20%;
	height: 60%;
	background-color: #ff5500;
	transform: rotate(var(--angle));
}