CSS - Check Mark

Example code demonstrating how to draw a check mark icon using HTML and CSS.

This HTML code sets the class name 'check-mark-icon' for the <div> element, which serves as the element to draw the check mark icon.

<div class="check-mark-icon"></div>

Utilizes pseudo-elements 'before' to create the left part and 'after' to create the right part of a square, forming the check mark icon.

Adjusts overall width and height, sizes, and positions of individual parts using the custom property '--w'.

Uses 'transform-origin' to specify the rotation center point.

/* Check Mark */
.check-mark-icon {
	--w: 300px; /* Base Size */
	position: relative;
	width: var(--w);
	height: calc(var(--w));
}

/* Left Part */
.check-mark-icon::before {
	content: "";
	position: absolute;
	bottom: 15%;
	left: 36%;
	width: 20%;
	height: 55%;
	background-color: #00fa9a;
	transform-origin: center bottom;
	transform: rotate(-45deg);
}

/* Right Part */
.check-mark-icon::after {
	content: "";
	position: absolute;
	bottom: 15%;
	left: 22%;
	width: 20%;
	height: 85%;
	background-color: #00fa9a;
	transform-origin: center bottom;
	transform: rotate(45deg);
}