CSS Triangle Generator

An element with width and height of zero has no content box, so its four borders meet at 45 degree diagonals in the center. If you color one border and make the two next to it transparent, the colored border collapses into a triangular wedge. That wedge is your triangle, drawn with no images, SVG or extra markup.

Each border grows inward from its own edge. The bottom border, for example, is a wedge whose flat base sits along the bottom and whose point reaches up, so coloring the bottom border makes a triangle that points up. That is why an up triangle colors border-bottom, a down triangle colors border-top, and so on.

Corner triangles like top-left use only two borders instead of three. One adjacent border is colored and the other is transparent, which produces a right-angle triangle that fills a corner. These are handy for ribbons, badge corners and folded-page effects.

The size is just the border width in pixels, so it sets both how wide and how tall the triangle is. A larger size makes a bigger triangle; the shape and direction stay the same. Edit the copied CSS if you want an asymmetric triangle with different border widths per side.

Yes. Position the generated element with absolute or relative positioning next to your tooltip, menu or speech bubble. Because the triangle is plain CSS it inherits transforms, transitions and color changes, so it animates and themes cleanly with the rest of your UI.

No. The preview and the generated CSS are computed entirely in your browser, so nothing about your triangle or its settings ever leaves your device.