# How to Generate a CSS Triangle

> Create pure CSS triangles for tooltips, dropdown arrows, and decorative elements using the CSS border trick — no images or SVG required.

- URL: https://www.browserutils.dev/how-to/generate-css-triangle
- Published: 2026-10-07
- Updated: 2026-07-02

---

## Step 1: Choose the direction

Select which direction the triangle should point — up, down, left, right, or diagonal. This determines which border sides are transparent.

## Step 2: Set size and color

Adjust the width and height of the triangle and choose the fill color to match your design.

## Step 3: Preview the triangle

See a live preview of the triangle and fine-tune the proportions until it matches your design requirements.

## Step 4: Copy the CSS code

Copy the generated CSS including the border trick properties. The output includes the element dimensions and border declarations.

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](/tools/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](/tools/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.