Build pure CSS triangles and arrows with the classic border trick. Pick a direction, tune size and color, then copy ready-to-use CSS — no images or SVG required.
🔒 Everything runs locally — no data is uploaded.
Shrink an element to zero width and height, then give it borders on all four sides. Make the borders on the sides you do not need transparent, and keep a color on the side facing the direction you want the triangle to point. The browser renders each border as a trapezoid that meets its neighbors at a diagonal, and when one side is zero width those diagonals form a clean triangle.
Choose up, down, left, right or one of four corner triangles for badges, ribbons and folded-corner effects.
A left, right, up or down triangle doubles as a lightweight arrow for tooltips, dropdown carets and speech bubble tails.
No image files, no SVG markup and no external libraries — just two CSS properties on a single empty element.
An element is shrunk to zero width and height, then two or more of its borders are made transparent while one border keeps a color. Where the colored border meets the transparent ones, the browser renders a diagonal edge that looks like a triangle.
Yes. A triangle pointing left, right, up or down doubles as a simple CSS arrow, and is commonly used for tooltips, dropdown carets and speech bubble tails.
Make sure the element has no content and that width and height are both set to 0. Border colors on the transparent sides must stay transparent, not the background color.
Yes. Because the shape is built from border widths, you can change those values inside a media query or with clamp() to scale the triangle at different viewport sizes.
Yes. Every shape is pure CSS using the border trick, so there are no image requests, no SVG markup and no external libraries.