CSS Triangle Generator
Generate a CSS triangle with the classic border trick — pick a direction, set the size, choose a color, see a live preview, and copy the width:0; height:0; border CSS.
The CSS Triangle Generator is a free tool for creating pure-CSS triangles using the classic border trick. Choose which way the triangle points — up, down, left, right, or one of the four corners — set its width and height, and pick a color. A live preview updates instantly, and the generated width: 0; height: 0; border CSS is ready to copy straight into your stylesheet. No images, no SVG, and no dependencies.
What is a CSS triangle generator?
A CSS triangle is a shape drawn with an element's borders instead of an image. By setting an element to width: 0 and height: 0 and giving it thick borders, the corners where the borders meet form diagonal edges. Make three borders transparent and one a solid color and you are left with a single triangle. This generator turns your direction, size, and color choices into that border CSS for you, so you do not have to work out which borders to colour and which to make transparent.
How to make a CSS triangle
Creating a triangle takes only a few steps:
- Pick the direction the triangle should point: up, down, left, right, or a corner.
- Set the width and height in pixels to control the triangle's proportions.
- Choose a color with the picker or by typing a hex value.
- Check the live preview to confirm the shape looks right.
- Copy the generated CSS and apply the class to an element in your page.
How does the CSS border triangle trick work?
When an element has no width or height, its four borders meet at the center point, and each border renders as a trapezoid that tapers to a triangle at its corners. By making the two borders next to the pointing direction transparent and the opposite border a solid color, only one triangular wedge stays visible. For an upward triangle, for example, the left and right borders are transparent and the bottom border is colored, so the colored shape points up.
How do I change the size and direction of the triangle?
The width controls the triangle's base for up and down triangles and its depth for left and right triangles, while the height does the opposite. To flip the direction, the generator swaps which border carries the color and which two are transparent. The corner directions use just two borders — one colored, one transparent — to produce a right-angled triangle anchored to that corner.
Why use this CSS triangle generator?
- 100% free with no ads, sign-up, or limits.
- Live preview updates instantly as you change direction, size, or color.
- Generates clean, standard CSS you can copy with one click.
- Supports up, down, left, right, and all four corner directions.
- Pure CSS — no images, SVG, or external dependencies.
- Runs entirely in your browser, so nothing is uploaded.
Frequently asked questions
Is the CSS triangle generator free?
Yes. Every tool on ToolsSoup is completely free, with no account, sign-up, or hidden limits.
Does the generated CSS work in all browsers?
Yes. The border triangle technique relies only on standard borders, so the CSS this tool produces works in every modern browser, including Chrome, Firefox, Safari, and Edge.
Why is the triangle made with borders instead of an image?
Border triangles are tiny, scale crisply at any resolution, and need no extra HTTP request. They are ideal for dropdown arrows, tooltips, ribbons, and speech-bubble tails where loading an image would be wasteful.
Is my data uploaded anywhere?
No. The generator runs entirely in your browser, so nothing you configure is sent to or stored on any server.