CSS - Infinity Symbol

An example of HTML & CSS code to create an infinity symbol shape.

The HTML element in this code example has a <div> tag with a class name of "infinity" to make it the infinity symbol shape.

<div class="infinity"></div>

The before and after pseudo elements are used to create the left and right parts that make up the infinity symbol shape.

The border-radius property rounds the edges into a circular shape that overlaps at the ends.

The left and right parts have position:absolute and are positioned with left and right to overlap in the center.

.infinity {
	--w: 300px; /* Base Size */
	position: relative;
	width: var(--w);
	height: var(--w);
}

.infinity::before {
	content: "";
	position: absolute;
	top: 25%;
	left: 2.5%;
	width: 45%;
	height: 45%;
	border: solid calc(var(--w) * 0.1) #ffa500;
	border-radius: 50% 50% 0 50%;
	transform: rotate(-45deg);
	box-sizing: border-box;
	opacity: 0.5;
}

.infinity::after {
	content: "";
	position: absolute;
	top: 25%;
	right: 2.5%;
	width: 45%;
	height: 45%;
	border: solid calc(var(--w) * 0.1) #ffa500;
	border-radius: 50% 50% 0 50%;
	box-sizing: border-box;
	transform:rotate(135deg);
}