Loading page
About this tool
Generate a CSS triangle using the border trick.
The CSS Triangle Generator writes the classic border-trick rule that turns a zero-sized box into a solid triangle: width:0; height:0; with two adjacent borders set to transparent and the third given your colour. Pick a direction (up, down, left or right), a size between 4 and 200 pixels and a colour, and you get the exact declaration block to paste into a class or a ::before pseudo-element. The chosen size sets each border width, so a size of 40 produces a triangle 40px tall on an 80px base.
Open CSS Triangle Generator on AltFTool — it loads instantly in your browser.
Drag the 'Size (px)' slider — it runs from 4 to 200 in steps of 2 and starts at 40 — to set the border width that decides how large the triangle is; the current number appears just under the slider
Choose up, down, left or right in the 'Direction' dropdown. The rule sets the two side borders to transparent and colours the one opposite the direction you picked, so down produces a coloured border-top
Type any CSS colour into the 'Color' field, which starts at #4f46e5 and is a plain text box rather than a swatch picker. Result then shows the full declaration beginning width:0;height:0; followed by the three border rules, and Copy places a summary with that 'Result:' line on the clipboard — the tool prints the CSS only and does not draw a preview of the triangle
The two transparent borders and the coloured one are matched to the direction you pick, which is the step people most often get backwards when writing the trick by hand.
One slider drives all three border widths, so you always know the result: the triangle is size px deep and twice that across its base.
Output includes width:0;height:0; with the borders, so the rule works on an empty div or a pseudo-element with no extra setup.
When an element has zero width and height, its four borders meet at a single point and each renders as a wedge cut on the diagonal. Make three of those wedges transparent and colour the fourth, and the visible remainder is a triangle pointing away from the coloured side.
Because the wedge you colour sits on the opposite side from the tip. An upward-pointing triangle is drawn with border-bottom coloured and the left and right borders transparent, which is exactly the pairing the generator applies for each direction.
The size sets every border width, so a value of N gives a triangle N pixels from base to tip and 2N pixels wide across the base. The slider accepts 4px to 200px in steps of 2.
The border trick is the safest choice for simple arrows because it works in every browser and needs no extra element sizing. Reach for clip-path when you need a non-isosceles shape, an angled or scalene triangle, or a border and gradient on the shape itself, which the border trick cannot do.