CSS Triangle & Arrow Generator
Pure-CSS triangles use a "hack" of thick transparent borders meeting at a point — no image, no clip-path. Rotate an arrow to any exact angle, or use a right-angle corner triangle for ribbons and badges, then preview it live against a tooltip box.
How the CSS triangle border trick works
An element with zero width and height has borders that meet at a single point in the middle. Making one border a solid color and the adjacent borders transparent leaves only the colored border visible as a triangle — the css arrow code behind tooltips, popovers, and chat bubbles. Building the base shape pointing up and rotating it with transform: rotate() lets it point at any exact angle, not just four fixed directions.
Using this as a tooltip arrow css tool
Toggle "preview with tooltip box" to see the arrow sitting against a real tooltip shape at the snapped angle, coloured to match, so you can judge the connection point before copying the code. Corner mode switches to the separate right-angle technique used for ribbon and badge corners, and either shape can be copied as an equivalent SVG polygon.