The border trick is the most widely used way to draw a triangle in pure CSS. Set width and height to 0 and the four borders meet at one point, each becoming a triangle; color just one side and leave the rest transparent and a single triangle is left. Pick a shape, a direction, a base, a height and a color, and the full declaration block is written for you.
For an isosceles triangle the base is split in half across the two side borders, and the height goes on the border opposite the point - which is why an upward triangle uses border-bottom. A right triangle drops one transparent border so the whole base becomes one leg. The box the element occupies is the sum of the left and right borders by the sum of the top and bottom borders, following the border-corner rules in W3C CSS Backgrounds and Borders (as of October 2026).
Shapes built from borders cannot take border-radius, a gradient or an outline. If you need rounded corners or a gradient, use clip-path or SVG instead. This tool does not generate squares, circles or star polygons - only triangles and right triangles. Treat the output as a starting point and check your own layout and accessibility requirements.
Frequently asked questions
A border is a trapezoid wrapped around the content box. Shrink the content box to a single point and the short edge disappears, leaving a triangle.
Use em, rem or a CSS variable for the border widths and the shape follows font size or theme. Percentages are not allowed for border widths.
Put the same declarations on a ::before or ::after whose content is an empty string and you get a tail. This tool does not compute tail positioning.