CSS - Diamond shape

Code example for creating a diamond shape using HTML and CSS.

The HTML element has the class name "diamond-shape" set on a <div> tag which will be the diamond shape element.

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

Creates the top part of the diamond with ::before and the bottom part with ::after pseudo elements.

Uses CSS custom properties to calculate the values needed to construct the diamond shape.
Sets "--w" as the reference width value for the shape.
Uses "--w" to compute all values required, making size/shape adjustments easy.

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

/* Top part */
.diamond-shape::before {
	content: "";
	position: absolute;
	top: 9%;
	width: 100%;
	border-bottom: calc(var(--w) * 0.25) solid #00bfff;
	border-left: calc(var(--w) * 0.25) solid transparent;
	border-right: calc(var(--w) * 0.25) solid transparent;
	box-sizing: border-box;
}

/* Bottom part */
.diamond-shape::after {
	content: "";
	position: absolute;
	top: 34%;
	width: 100%;
	border-top: calc(var(--w) * 0.6) solid #4169e1;
	border-left: calc(var(--w) * 0.5) solid transparent;
	border-right: calc(var(--w) * 0.5) solid transparent;
	box-sizing: border-box;
}