CSS - Crown icon

Code example for drawing a crown icon shape using HTML and CSS.

This HTML code sets the class name "crown-icon" for the <div> tag which will be the crown icon element.

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

Creates triangular parts with ::before and ::after pseudo elements.

Sets the --w CSS custom property for the reference width value for the shapes.
Uses calc() to compute all values needed for the crown shape.

Also sets different transparency on left/right parts to visualize the individual shape pieces.

.crown-icon {
	--w: 2000px; /* Base Size */
	position: relative;
	border-bottom: calc(var(--w) * 1) solid #ffa500;
	border-right: calc(var(--w) * 0.5) solid transparent;
	border-left: calc(var(--w) * 0.5) solid transparent;
	box-sizing: border-box;
}

/* Left triangle */
.crown-icon::before {
	content: "";
	position: absolute;
	top: calc(var(--w) * 0.2);
	left: calc(var(--w) * (-0.86));
	border-bottom: calc(var(--w) * 0.8) solid #ffa500;
	border-right: calc(var(--w) * 0.5) solid transparent;
	border-left: calc(var(--w) * 0.5) solid transparent;
	box-sizing: border-box;
	transform: skewX(40deg);
	opacity: 0.7; /* Transparency to view shape */
}

/* Right triangle */
.crown-icon::after {
	content: "";
	position: absolute;
	top: calc(var(--w) * 0.2);
	left: calc(var(--w) * (-0.14));
	border-bottom: calc(var(--w) * 0.8) solid #ffa500;
	border-right: calc(var(--w) * 0.5) solid transparent;
	border-left: calc(var(--w) * 0.5) solid transparent;
	box-sizing: border-box;
	transform: skewX(-40deg);
	opacity: 0.7; /* Transparency to view shape */
}