CSS Triangle and Arrow Generator

How it works

Type the triangle's colour into the left panel — HEX, RGB and HSL all work, and the code refreshes on every change. Pick a direction and set the width and height: 24 pixels wide and 16 high is a common starting point for dropdown carets and tooltip arrows. The tool writes width: 0 and height: 0 and builds the triangle from border thicknesses; for the up direction a 24-pixel base splits into 12 pixels each for the left and right border-width values — with an odd width you will see half values like 12.5px, which browsers draw without trouble. The corner directions use only two borders and fill that corner of the box with a right triangle; that is how ribbon and badge cuts are made. Copy the code from the right panel into your own selector, or press Download to save the preview as a 1200×800 pixel PNG.

This tool is also known as css triangle generator, css arrow generator, triangle with css borders, css tooltip arrow, css triangle down, how to make a triangle in css.

What is Border trick?

The border trick is the classic way to draw a triangle in CSS without any image file. A box with zero width and height gets thick borders; because borders meet at the corners along 45-degree diagonals, each border takes the shape of a triangle. Colour the side you want and set the neighbouring sides to transparent, and only that triangle remains visible. The technique is very old and works the same way in essentially every browser ever shipped; dropdown carets, tooltip arrows and corner ribbons are its most common uses.

What is clip-path?

clip-path is the CSS property that crops an element's visible area to a given geometric path; writing polygon(50% 0, 100% 100%, 0 100%) clips the element into a triangle. The difference from the border trick is that the clipped element is a real box: it can hold a gradient, an image or text, and most browsers paint its edges more smoothly. In exchange you write the path coordinates by hand, and very old browsers ignore the property entirely. In practice: border trick for small arrows, clip-path for large shapes that carry content.

What is the difference between a border triangle and a clip-path triangle?

The border triangle is a drawing trick: there is no real area for content in the middle, just border paint in one colour. That limits it to solid colours, but it works in every browser and two lines of code finish the job — ideal for small arrows, carets and corner cuts. clip-path instead crops a real box into a triangle: you can fill it with a gradient, a photo or even text, and the diagonal edge is smoother on most screens; in exchange you write the coordinates yourself, and on very old browsers the shape falls back to a plain rectangle. The practical rule: border trick for arrows and corner marks, clip-path for shapes with content or beyond 100 pixels.

The zero-size box: the triangle is really a border

The whole trick rests on one observation: on a box with thick borders, two neighbouring borders meet at the corner along a 45-degree diagonal. Shrink the box's width and height to zero and only the borders remain — each one now shaped like a triangle. Paint one border and set its neighbours to transparent, and a single triangle shows on screen. Do not delete the width: 0 and height: 0 lines from the code; give the box any size and the triangle deforms into a trapezoid.

One known limit is worth stating: the diagonal edge comes from the browser's border painting, so on some screens it can look slightly jagged, and the bigger the triangle the more visible this gets. For small arrows and corner cuts it is unnoticeable; for decorative triangles beyond 100 pixels, consider the clip-path route, which draws a smoother edge.

Which direction for which job?

A triangle's meaning is read from its direction; these are the common pairings.

• Arrow under a tooltip bubble → up or down, 12-16 pixel base
• Dropdown menu indicator → down, 8-10 pixels: it should sit small next to the text
• Next / back, play button → right or left, width and height close to each other
• Ribbon, badge, corner label → corner directions: the triangle fills the box corner
• Speech bubble tail → one of the bottom corners, same colour as the bubble background

Frequently asked questions

Is this triangle an image? Does the page load a file?

No file is involved; the triangle is pure CSS. The thick borders of a zero-size box meet along diagonals at the corners; painting one border and making its neighbours transparent leaves a triangle. Because it is code, it stays sharp at every screen density and the colour changes with one line.

How do I attach the triangle to a speech bubble or tooltip?

The usual way is to put the triangle on the bubble's ::after pseudo-element: give the bubble position: relative, give the pseudo-element position: absolute and content: '', then add the border lines this tool produces. Position the arrow along the bubble's edge with properties like left and bottom — no extra element enters the HTML.

Why does the diagonal edge look jagged?

The diagonal comes from how the browser paints the border join, and the anti-aliasing differs between browsers; on large triangles the stair-stepping can become visible. Small arrows are fine. If you need a large decorative triangle, clip-path: polygon(...) gives a smoother edge.

Where does my colour go in the code?

Into the border-color line: the painted side carries your colour and the other three sides read transparent. Unlike a border-radius generator, here the colour is part of the code itself, because the border is the triangle; to change the colour later, edit that one value.