Learn two dependable ways to create a left-pointing triangle in CSS, using classic border tricks or modern clip-path, plus tips for centering content inside and customizing the result.
Live Preview: Triangle (Left)
Method 1: Using Borders
.triangle-left {
width: 0;
height: 0;
border-top: 70px solid transparent;
border-bottom: 70px solid transparent;
border-right: 120px solid #cd5454; /* color of the triangle */
}
/* Optional: center the element itself */
.triangle-left-center {
display: block;
margin-left: auto;
margin-right: auto;
}Method 2: Using clip-path
.triangle-left-clip {
width: 150px;
height: 130px;
background: #cd5454;
/* Left-pointing triangle */
clip-path: polygon(100% 0, 0 50%, 100% 100%);
}
/* Optional: center the element itself */
.triangle-left-clip-center {
display: block;
margin-left: auto;
margin-right: auto;
}How This Works
The border method uses a zero-size box with thick borders. By making the top and bottom borders transparent and coloring only the right border, the visible shape becomes a triangle pointing left. Adjust the border widths to change the triangle’s proportions.
The clip-path method draws a polygonal mask on a regular rectangle, cropping it into a left-pointing triangle. This approach preserves an actual content box, so you can place and center text or icons inside the shape.
How to Center Content Inside a Triangle (Left)
The easiest way to center text or icons inside is to use Flexbox or Grid on the clipping-based triangle (since the border triangle has no content box).
Method 1: Use CSS Flexbox
.triangle-left-clip {
width: 180px;
height: 140px;
background: #cd5454;
clip-path: polygon(100% 0, 0 50%, 100% 100%);
display: flex;
justify-content: center; /* horizontal center */
align-items: center; /* vertical center */
color: #fff; /* optional text color */
}
Method 2: Use CSS Grid
.triangle-left-clip {
width: 180px;
height: 140px;
background: #cd5454;
clip-path: polygon(100% 0, 0 50%, 100% 100%);
display: grid;
place-items: center; /* centers both horizontally and vertically */
color: #fff; /* optional text color */
}When to Use Each Shape Method
Use the border method for the simplest, lightweight decorative triangles that don’t need content or backgrounds. Choose clip-path when you need a scalable triangle that can hold and center content, support backgrounds, hover effects, or responsive sizing (with slightly broader browser considerations).
Quick Customizations
Change the triangle’s color via border-right-color (border method) or background (clip-path). Tweak size by adjusting border widths (border method) or the element’s width/height (clip-path). For shadows on clip-path shapes, prefer filter: drop-shadow(…) to get a shadow that follows the triangular outline; box-shadow is applied to the element’s box and then clipped, which often doesn’t look like a true triangle shadow.
/* Triangular shadow that matches the clipped shape */
.triangle-left-clip.shadow {
filter: drop-shadow(0 6px 12px rgba(0,0,0,0.25));
}
/* Note: box-shadow is rectangular and then clipped, often not ideal */
.triangle-left-clip.box-shadow {
box-shadow: 0 6px 12px rgba(0,0,0,0.25);
}Accessibility & SEO
If the triangle is purely decorative, hide it from assistive tech with aria-hidden=”true”. If it conveys meaning, don’t rely on aria-label on a plain div alone, give it a role or use a semantic element with an accessible name.