CSS - Arc Shape

Code example for drawing a simple arc shape using HTML and CSS.

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

<div class="arc-shape"></div>

The CSS custom property "--w" sets the base width for the shape.
"--angle" allows rotating the element.

"border-radius" limits the rounded corners.
"border-bottom: 0" removes the straight border section.

/* Arc Shape */
.arc-shape {
	--w: 300px; /* Base Size */
	--angle: 0deg; /* Rotation */
	width: var(--w);
	height: calc(var(--w) * 0.5);
	border: solid calc(var(--w) * 0.15) #4169e1;
	border-radius: calc(var(--w) * 0.5) calc(var(--w) * 0.5) 0 0;
	border-bottom: 0;
	box-sizing: border-box;
	transform: rotate(var(--angle));
}