Learn two clean CSS techniques to draw a perfectly equilateral triangle and understand when to use each. Copy the snippets below and customize size, color, and alignment in seconds.
Live Preview: Equilateral Triangle
Method 1: Using CSS Borders (Zero-Box Triangle)
/* Equilateral triangle pointing up via borders */
.triangle-eq-border {
/* Controls the triangle's side length */
--side: 150px;
width: 0;
height: 0;
/* For an equilateral triangle, height = side * √3 / 2 ≈ side * 0.8660254 */
border-left: calc(var(--side) / 2) solid transparent;
border-right: calc(var(--side) / 2) solid transparent;
border-bottom: calc(var(--side) * 0.8660254) solid #cd5454;
/* Center the shape block */
display: block;
margin-left: auto;
margin-right: auto;
}Method 2: Using clip-path Polygon
/* Equilateral triangle by clipping a rectangle */
.triangle-eq-clip {
--side: 150px;
width: var(--side);
height: calc(var(--side) * 0.8660254); /* side * √3/2 */
background: #cd5454;
/* Upward-pointing triangle */
-webkit-clip-path: polygon(50% 0, 0 100%, 100% 100%);
clip-path: polygon(50% 0, 0 100%, 100% 100%);
/* Center the shape block */
display: block;
margin-left: auto;
margin-right: auto;
}How This Works
An equilateral triangle’s height equals side × √3 / 2 (≈ side × 0.8660254). In the border method, we set the left and right borders to half the side, and the bottom border to side × 0.8660254 with the fill color; the other borders are transparent, forming the triangle.
With clip-path, we draw a box sized to the triangle’s exact width and height ratio and clip it to three points: top center, bottom left, and bottom right. This produces crisp 60° edges that scale cleanly.
How to Center Content Inside an Equilateral Triangle
Flexbox or Grid is the easiest way to center content, but note that content cannot live inside the zero-size border triangle. Use the clip-path method (or a container with real width/height) when you need inner content.
Method 1: Use CSS Flexbox
/* Add to the clip-path method when placing text/icons inside */
.triangle-eq-clip {
display: flex; /* switch from block to flex */
justify-content: center; /* horizontal centering */
align-items: center; /* vertical centering */
color: #fff; /* optional: readable text */
font: 600 14px/1.2 system-ui, sans-serif;
}Method 2: Use CSS Grid
/* Alternatively, use Grid centering */
.triangle-eq-clip {
display: grid; /* switch from block/flex to grid */
place-items: center; /* centers both axes */
color: #fff;
font: 600 14px/1.2 system-ui, sans-serif;
}When to Use Each Shape Method
Use the border method for the simplest, lightweight, and widely supported decorative triangles with no inner content. Use clip-path when you need responsiveness, actual content inside the triangle, or transforms/animations without the quirks of zero-width/height elements. For a true, clean outline around a triangle, prefer SVG (see below).
Quick Customizations
Change the color by updating #cd5454 to any hex or CSS color. Adjust size by changing –side. To rotate the triangle, add transform: rotate(180deg); (or any angle) to flip its direction. For outlines that follow the triangle edges, see “How to Add a True Outline.”
How to Add a True Outline
Recommended: Use SVG with Stroke
SVG strokes follow the triangle’s edges perfectly and scale cleanly.
<svg class="triangle-eq-svg" viewBox="0 0 150 129.90381" aria-hidden="true">
<polygon
points="75,0 0,129.90381 150,129.90381"
fill="#cd5454"
stroke="currentColor"
stroke-width="2"
/>
</svg>
/* Optional sizing/centering */
.triangle-eq-svg {
--side: 150px;
width: var(--side);
height: calc(var(--side) * 0.8660254);
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 12px;
}
Pure CSS Approximations (not perfectly uniform)
If you must stay with CSS only, these approaches approximate an outline around a clip-path triangle:
Option A: Duplicate shape behind via ::before, slightly larger
/* Start with your existing .triangle-eq-clip styles, then add: */
.triangle-eq-clip {
position: relative; /* enable absolute positioning for the pseudo-element */
}
/* Approximate outline thickness via --stroke */
.triangle-eq-clip::before {
content: "";
position: absolute;
inset: calc(-1 * var(--stroke, 2px));
background: currentColor; /* outline color */
-webkit-clip-path: inherit;
clip-path: inherit; /* same polygon as the element */
z-index: -1; /* sit behind the fill */
}
/* Example usage:
.triangle-eq-clip { --side: 150px; --stroke: 3px; background: #cd5454; }
*/Option B: Multiple drop-shadows around the shape
/* Apply to the clipped element; approximates a 1px outline */
.triangle-eq-clip {
filter:
drop-shadow( 0 0 0 currentColor)
drop-shadow( 1px 0 0 currentColor)
drop-shadow(-1px 0 0 currentColor)
drop-shadow( 0 1px 0 currentColor)
drop-shadow( 0 -1px 0 currentColor)
drop-shadow( 1px 1px 0 currentColor)
drop-shadow(-1px 1px 0 currentColor)
drop-shadow( 1px -1px 0 currentColor)
drop-shadow(-1px -1px 0 currentColor);
}
/* Increase thickness by adding more offsets (e.g., 2px, 3px), but results remain an approximation. */Note: inset box-shadow is based on the element’s rectangular box, not the clipped polygon, so it won’t produce a uniform triangular border.
Accessibility & SEO
If the triangle is decorative, add aria-hidden=”true”; if it conveys meaning, include accessible text nearby or inside and ensure sufficient color contrast.