CSS Triangle Generator
Generate a pure-CSS triangle in any direction — set size and color, preview it live, and copy the code. Perfect for tooltips, arrows, and ribbons. Free.
💡 How it works
- The triangle is made from a zero-size element with thick, mostly-transparent borders — a classic CSS trick.
- Adjust the width and height to change the triangle's proportions.
- Great for tooltips, dropdown arrows, ribbons, and speech bubbles.
Free CSS Triangle Generator
Generate a pure-CSS triangle in any direction and copy the code instantly. Choose the direction, set the width, height, and color, and preview it live — then paste ready-to-use triangle CSS. Perfect for tooltips, dropdown arrows, ribbons, and speech bubbles. Free, no sign-up.
How CSS triangles work
You cannot draw a triangle directly in CSS, but there is a clever, widely-used trick: give an element zero width and height, then add thick borders. Because adjacent borders meet at a 45-degree diagonal, making three of the four borders transparent and one border a solid color leaves a triangle. This generator handles the math for you and outputs the exact border values for the direction you choose.
How to use the triangle generator
It is instant:
- Pick a direction — up, down, left, right, or a corner.
- Adjust the width and height to control the triangle's shape.
- Choose the color.
- Copy the generated CSS and apply it to an element.
Common uses for CSS triangles
Triangles made this way are everywhere in interfaces:
- Tooltip and popover arrows that point at their trigger.
- Dropdown and select caret indicators.
- Speech-bubble tails on chat messages.
- Ribbon ends and folded-corner effects.
- Play buttons and simple directional icons.
Attaching a triangle to a tooltip or bubble
The usual pattern is to create the triangle with a ::before or ::after pseudo-element and position it absolutely against its parent — for example, a downward triangle placed at the bottom center of a tooltip so it points at the element below. Match the triangle's color to the tooltip's background so it looks like a seamless tail. Because the triangle is pure CSS, it scales crisply and adds no extra image request.
Triangles vs clip-path
The border trick is the most compatible way to make a triangle and works in every browser, which is why it remains popular for small UI arrows. For more complex shapes, or when you want to clip actual content rather than draw a solid triangle, the clip-path property is more flexible. Use the border method for tiny arrows and carets, and reach for clip-path when you need polygons, stars, or to shape an image.
Pro tip
Keep the triangle color as a CSS variable so a tooltip's tail always matches its background automatically. When placing a triangle as a pseudo-element, remember it has no content — set its content to an empty string and use position: absolute. For arrow-heavy UI shapes, our Clip-Path Generator complements this tool nicely.
FAQ
Is this CSS Triangle Generator free?
How do you make a triangle in CSS?
How do I change the triangle's direction?
How do I add a triangle arrow to a tooltip?
Why is my triangle not showing?
Should I use the border trick or clip-path?
Do CSS triangles work in all browsers?
Related tools
Pro tip: pair this tool with CSS Box-Shadow Generator and CSS Gradient Generator for a faster SEO workflow.