Overview
A builder for the classic zero-size border triangle. Pick one of six directions, including the two diagonal corners, set width and height from 20 to 200 pixels, choose a fill color, and the tool emits the three or four border declarations that trick the browser into painting a solid triangle. The preview renders the exact shape at real size.
How It Works
Choose a direction: top, bottom, left, right, top-left or top-right. Drag the width and height sliders and pick the fill color with the picker or hex field. The preview draws the triangle with live inline styles identical to the emitted code. Copy the CSS, which always starts from width: 0 and height: 0 followed by the border recipe: two transparent side borders plus one colored border for the four cardinal directions, or a colored border plus one transparent border for the diagonal corners.
Step-by-Step Usage Guide
- Pick the pointing direction from the six buttons.
- Set width and height with the sliders.
- Choose the fill color.
- Copy the border recipe.
Technical Specifications & Standards
The trick relies on how CSS paints border corners: where two borders meet, the browser bevels the join along the diagonal bisector. Give an element zero content size and put all its visual bulk in borders, and each border becomes a trapezoid; make the neighbouring border transparent and only one triangle of colour remains. For the up-pointing version the two side borders are each half the total width and the bottom border carries the full height, which is why the emitted recipe divides width by two for left and right. The diagonal variants keep one full colored edge and one transparent edge, producing a right-angle triangle. Modern alternatives exist, clip-path polygon for arbitrary shapes and a rotated square for diamond tips, but the border method still has the broadest possible support and costs nothing to paint.
Targeted Use Cases
- Dropdown carets and tooltip arrows that match brand colors.
- Breadcrumb separators and play buttons in media controls.
- Speech bubble tails attached to chat panels.
- Corner accents on badges without loading an icon font.
Notes & Gotchas
- Match the two transparent border widths exactly, or the triangle leans to one side.
- Prefer clip-path polygon when you also need rounded or irregular shapes; the border trick only makes straight triangles.
- Give the element display: block or inline-block so the borders do not sit on a text baseline.
- Remember the triangle points opposite to its colored border: a bottom border paints an up-pointing triangle.
Frequently Asked Questions
Why does the code start with width: 0 and height: 0?
The triangle is made entirely of borders. Zeroing the content box means the border edges meet at single points, so each border collapses into the wedge shape that reads as a triangle.
Why are the side borders half the width for top and bottom triangles?
The side borders form the base of the triangle, and each contributes half. Their transparent wedges carve the coloured bottom border into the pointed shape, so the full base width is split between the two of them.
Can I make a triangle with rounded corners this way?
No. Border triangles are always straight-edged. For rounded points use an SVG, a clip-path polygon approximation, or layer a rotated rounded square behind a border triangle.
How do the diagonal top-left and top-right variants work?
They keep one full coloured border, say the top, and one adjacent transparent border, say the right. The bevelled join between them leaves a right-angle triangle in the corner colour.