CSS Triangle Generator

The tiny arrow on a tooltip, the pointer on a speech bubble, the caret on a dropdown: cases too small to justify an SVG, yet annoying to hand-write. A pure CSS triangle handles them in half a dozen lines, but nobody remembers which border gets the color and which ones go transparent for each direction. Here you click one of eight directions, set width, height and color, check the preview and copy the ready block.

The trick exploits how browsers draw borders: on an element with zero width and height, the four borders meet along diagonals. Paint one and leave its neighbors transparent, and what remains is a triangle. For the four straight directions, the generator uses two side borders at half the width each, and the triangle's height becomes the thickness of the colored border; for the four corner diagonals the construction changes and it combines two full-size borders into a right triangle.

To attach it to a tooltip, paste the code into an ::after pseudo-element with position: absolute and place it against the bubble's edge, so you keep the HTML free of extra divs. The technique has clear limits: borders only take solid colors, so no gradients, no outline around the triangle, no background image inside the shape; for those, switch to clip-path or SVG. The generator accepts 20 to 400 px per side and runs entirely in your browser.