CSS - Triangle

Code example for drawing an equilateral triangle using CSS.

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

<div class="triangle"></div>

The sample code uses the base "border-bottom" length as the reference value assigned to the --w CSS custom property.

Based on this, the height is (2√3)/2 * w, and "border-right" and "border-left" are (2√3) * w/3.

/* Triangle */
.triangle {
	--w: 300px; /* Base size */
	--tw: calc(var(--w) * 0.8); /* Triangle size */
	--angle: 0deg; /* Rotation */
	position: relative;
	width: var(--w);
	height: var(--w);
	transform: rotate(var(--angle));
}

.triangle::before {
	content: "";
	position: absolute;
	top: 10%;
	left: 4%;
	border-bottom: var(--tw) solid orange;
	border-right: calc(var(--tw) * 2 * 1.732 / 2 / 3) solid transparent;
	border-left: calc(var(--tw) * 2 * 1.732 / 2 / 3) solid transparent;
	box-sizing: border-box;
}