CSS - Magnet Icon

Code example for drawing a magnet icon using HTML and CSS.

The HTML code sets the class name "magnet-icon" for the <div> tag which will make up the magnet icon element.

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

The "border" property creates the magnet's semicircular shape.
Setting "border-top" to "0" removes the top straight border.

The ::before and ::after pseudo elements create the red and blue side pieces.

The CSS custom property "--w" sets the base width for the icon shape.
The custom property "--angle" can be used to rotate the icon.

/* Magnet */
.magnet-icon {
	--w: 200px; /* Base Size */
	--angle: 0deg; /* Rotation */
	position: relative;
	width: var(--w);
	height: var(--w);
	border: solid calc(var(--w) * 0.25) #404040;
	border-radius: 0 0 50% 50%;
	border-top: 0;
	box-sizing: border-box;
}

/* Red */
.magnet-icon::before {
	content: "";
	position: absolute;
	left: -50%;
	width: calc(var(--w) * 0.25);
	height: calc(var(--w) * 0.25);
	background-color: #ff0000;
	box-sizing: border-box;
}

/* Blue */
.magnet-icon::after {
	content: "";
	position: absolute;
	left: 100%;
	width: calc(var(--w) * 0.25);
	height: calc(var(--w) * 0.25);
	background-color: #0000ff;
	box-sizing: border-box;
}