CSS Triangle Generator

When an element has width: 0 and height: 0, its borders meet at a point. By making three borders transparent and one border colored, you create a triangle. The colored border's width determines the triangle's height, while the adjacent transparent borders control the base width. This technique works in all browsers including IE6.

Border method: Maximum browser compatibility (IE6+), lightweight, but cannot have box-shadows or background images directly on the triangle. Clip-path method: Modern browsers only (IE not supported), but supports box-shadow, filter: drop-shadow(), background gradients, and more flexible shapes. Choose based on your browser support requirements.

Yes! For the border method, use viewport-relative units like vw or percentages within a responsive container. For clip-path, the polygon() uses percentage values by default, making it naturally responsive to the container size. You can also use em or rem units for font-relative sizing.

For the border method, set the height (colored border) to approximately 1.732 × half-base. For example: half-base = 50px, height ≈ 87px. Use our "Equilateral" preset for a quick start. With clip-path, use polygon(50% 0%, 0% 100%, 100% 100%) in a container with the right aspect ratio.

With the border method, you cannot directly add an outline. The workaround is placing a slightly larger triangle behind it (using a pseudo-element like ::before). With clip-path, you can use filter: drop-shadow() to create an outline effect, or use outline on the container (though the outline follows the rectangular box, not the triangle shape).

CSS triangles are widely used for tooltip arrows, dropdown menu indicators, navigation breadcrumb separators, chat bubble pointers, accordion toggle indicators, play buttons on video thumbnails, decorative dividers, loading spinners (animated), and notification badges. They eliminate the need for image assets or SVG icons for simple directional indicators.

Yes! Border-based triangles can be animated by transitioning border-width or border-color. Clip-path triangles can be animated using transition on the clip-path property. You can create morphing effects, rotation animations (with transform: rotate()), or color transitions. For complex shape morphing, clip-path offers smoother animations.

Even with width: 0; height: 0;, the border widths contribute to the element's actual rendered size. A triangle with 80px borders occupies an 80px × 80px area. Use display: inline-block with vertical-align: middle for inline placement, or wrap it in a container with fixed dimensions to control the layout precisely.