CSS Triangle Builder

A CSS triangle is a pure CSS shape created without images or SVG. There are two primary methods: the border trick (setting an element's width/height to 0 and using colored transparent borders) and the modern clip-path method (using clip-path: polygon() to clip a rectangular element into a triangle shape). Both methods are widely supported across browsers.

It depends on your use case. Clip-path is more flexible (supports 8+ directions, corner triangles, and works with gradients/images as backgrounds). Border method is the classic approach, works in all browsers including very old ones, and is ideal for simple tooltip arrows or dropdown indicators. For modern projects, clip-path is generally recommended due to its flexibility and cleaner code.

When an element has width: 0 and height: 0, its borders meet at a point in the center, each forming a triangle. By making three borders transparent and one border colored, only the colored triangle is visible. For example, a top-pointing triangle uses transparent left/right borders and a colored bottom border. The border widths control the triangle's dimensions.

Yes! With clip-path, triangles automatically adapt to their container's width and height when using percentage-based clip-path values (like polygon(50% 0%, 0% 100%, 100% 100%)). With the border method, you'd need to use viewport units (vw/vh) or JavaScript to dynamically adjust border widths. Clip-path is the better choice for responsive designs.

For clip-path triangles, use filter: drop-shadow() instead of box-shadow. Since box-shadow applies to the element's rectangular box (not the clipped shape), it won't follow the triangle's edges. drop-shadow() respects the actual visible shape. For border-method triangles, you can apply box-shadow to a pseudo-element wrapper.

CSS triangles are widely used for: tooltip arrows, dropdown menu indicators, decorative section dividers, corner ribbons/badges, play buttons, navigation pointers, chat bubble tails, and accordion expand/collapse icons. They eliminate the need for extra image assets and keep your design lightweight.

Pure CSS cannot create a truly rounded triangle with a single element using clip-path or border methods. However, you can simulate rounded corners by applying a slight border-radius to the element before clipping, or by using SVG. For a soft-edged triangle effect, consider using filter: blur() sparingly or combining multiple overlapping shapes.

Clip-path with polygon() is supported in all modern browsers: Chrome 55+, Firefox 54+, Safari 10.1+, and Edge 79+. Global support is approximately 97% as of 2025. For broader compatibility (including IE11), use the border method as a fallback.