How to Generate a CSS Triangle

CSS triangles are a classic technique used for tooltip arrows, dropdown indicators, breadcrumb separators, and decorative design elements. They work without images or SVGs, keeping your page lightweight. The CSS Triangle Generator handles the unintuitive border math so you can create the exact triangle you need and copy the code.

Understanding the CSS border trick

CSS triangles are not drawn — they are an optical illusion created by the way borders meet at corners. When an element has zero width and height, the borders form triangles at each corner. By making three of the four borders transparent and one colored, you get a visible triangle pointing in the opposite direction of the colored border.

For example, a downward-pointing triangle uses a colored border-top with transparent left, right, and bottom borders. The border-width values control the triangle’s dimensions: the colored border’s width determines the height, and the perpendicular borders’ widths determine the half-width of the base.

This technique dates back to the early days of CSS and works in every browser. While modern alternatives like clip-path and inline SVG offer more flexibility, the border trick remains popular for small UI elements like tooltip arrows because it requires no additional markup and is straightforward to position.

Tips and best practices

• Use clip-path for complex shapes. The border trick only creates right triangles and isosceles triangles. For equilateral triangles or more complex polygons, the CSS Clip-Path Generator is more flexible.
• Position triangles with pseudo-elements. Use ::before or ::after pseudo-elements to attach triangles to tooltips or dropdowns. Combine with position: absolute to place them precisely.
• Match the triangle color to connected elements. For tooltip arrows, set the triangle color to match the tooltip’s background color so they appear as a single connected shape.
• Account for borders on the parent element. If the connected element has a border, you may need a second triangle (slightly larger, in the border color) positioned behind the first to simulate a bordered arrow.
• Consider using transform: rotate() for diagonal arrows. Instead of calculating diagonal border values, create a square, rotate it 45 degrees, and hide half of it behind a parent element.

Common issues

• Triangle appears as a rectangle. Make sure the element has width: 0 and height: 0. Any content or padding will distort the triangle shape.
• Triangle not appearing at all. If all four borders are transparent, nothing is visible. Ensure exactly one border has a non-transparent color, and the element has display: block or display: inline-block.
• Positioning is off by a pixel. Sub-pixel rendering can cause tiny gaps between a triangle and its parent element. Use translateY(-1px) or adjust positioning to eliminate the gap.