Learn two reliable ways to make an up-pointing triangle with pure CSS, plus easy techniques to center content inside it. Perfect for pointers, tooltips, and decorative UI accents.
Live Preview: Triangle (Up)
Method 1: Using Borders
.triangle-up {
width: 0;
height: 0;
/* Two transparent sides create the slanted edges */
border-left: 75px solid transparent;
border-right: 75px solid transparent;
/* The bottom border becomes the visible triangle fill */
border-bottom: 120px solid #cd5454;
/* Optional centering */
display: block;
margin-left: auto;
margin-right: auto;
}Method 2: Using clip-path (Polygon)
.triangle-up-clip {
width: 150px;
height: 130px;
background: #cd5454;
-webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
/* Optional centering */
margin: 0 auto;
}How This Works
The border method sets the element’s width and height to zero, then uses wide transparent left/right borders to form the slanted sides while the bottom border supplies the visible color. Because the content box is 0×0, it’s a lightweight, well-supported trick for simple triangles.
The clip-path method keeps a real box (with width/height) and masks it to a triangle via polygon coordinates. This approach can hold content inside and supports backgrounds, gradients, and shadows, making it more versatile for UI components.
How to Center Content Inside a Triangle (Up)
Flexbox or Grid is the easiest way, but it only works with triangle methods that retain a real box (e.g., the clip-path approach or a wrapper element with a pseudo-element triangle).
Method 1: Use CSS Flexbox
.triangle-up-clip {
width: 150px;
height: 130px;
background: #cd5454;
-webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
display: flex;
justify-content: center;
align-items: center;
}Method 2: Use CSS Grid
.triangle-up-clip {
display: grid;
place-items: center;
}When to Use Each Shape Method
Use the border triangle for simple decorative pointers and when you don’t need inner content, it’s extremely lightweight and widely supported. Choose clip-path when you need to place text/icons inside the triangle, apply gradients/backgrounds, or animate/scale the shape more predictably.
Quick Customizations
Change size by adjusting the border widths (border method) or the element’s width/height (clip-path). To change color, switch the border-bottom color (border method) or the background value (clip-path); add a subtle shadow with filter: drop-shadow(…) on the clip-path version.
Accessibility & SEO
If the triangle conveys meaning (e.g., a direction indicator), give its container role=”img” and an aria-label, and ensure sufficient color contrast against backgrounds.