CSS - Arrow Icon

Code example for drawing an arrow icon using HTML and CSS.

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

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

The pseudo elements "before" and "after" create the top and bottom parts of the arrow.

The CSS custom property "--w" specifies the reference width for the shape.
It also uses the custom property "--angle" to allow rotating the arrow icon.

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

/* Top part of arrow */
.arrow-icon::before {
	content: "";
	position: absolute;
	top: 5%;
	left: 25%;
	border-bottom: calc(var(--w) * 0.45) solid #dc143c;
	border-right: calc(var(--w) * 0.25) solid transparent;
	border-left: calc(var(--w) * 0.25) solid transparent;
	transform-origin: center bottom;
	transform: rotate(var(--angle));
}

/* Bottom part of arrow */
.arrow-icon::after {
	content: "";
	position: absolute;
	top: 49%;
	left: 40%;
	width: 20%;
	height: 45%;
	background-color: #dc143c;
	transform-origin: center top;
	transform: rotate(var(--angle));
}