CSS Triangle Generator
.triangle {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #007bff;
}.triangle {
width: 100px;
height: 100px;
background-color: #007bff;
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}About the CSS Triangle Generator
CSS triangles are a clever technique that has been used by web developers for over a decade to create arrow shapes, tooltip pointers, and decorative elements without using images. This free tool generates the CSS code you need to create triangles pointing in any of eight directions: up, down, left, right, and the four diagonal corners.
The classic border method works by setting an element's width and height to zero and using thick borders that meet at angles. When some borders are made transparent while others are colored, the result is a triangular shape. This technique has excellent browser support and works reliably across all modern and legacy browsers. The border method is particularly useful for creating small UI elements like dropdown arrows, tooltip pointers, and breadcrumb separators.
As an alternative, our generator also provides the modern clip-path method. This approach uses the CSS clip-path property with a polygon function to cut out a triangular shape from a regular rectangular element. The clip-path method is more intuitive to understand and offers greater flexibility for creating complex shapes. It also allows you to apply background images or gradients to your triangles, which is not possible with the border technique.
Simply adjust the direction, width, height, and color using the controls, and watch the live preview update instantly. Once you're satisfied with your triangle, copy the CSS code with a single click. Both the border and clip-path versions are provided so you can choose the approach that best fits your project requirements and browser support needs.