CSS Triangle Generator
Make a CSS triangle pointing up, down, left, right or to a corner. Set width, height and color; get the border-trick CSS, a clip-path version and a live preview.
Triangles in CSS are used for tooltip arrows, dropdown carets, ribbons and decorative corners. The classic method gives a box zero width and height and colors one of its borders: where the borders meet, they are cut diagonally, so one colored border becomes a triangle. The modern method is clip-path: polygon(), which cuts a normal box. This generator writes both for any of eight directions, and previews them side by side in your browser.
How to use this tool
- Choose the direction the triangle points.
- Set the width and height, or tick Equilateral for equal sides.
- Pick the color and, if needed, a class name.
- Copy the border-trick CSS or the clip-path CSS, plus the HTML element.
Formula
up: border-left = border-right = width ÷ 2 (transparent), border-bottom = height (color) · corner: one colored border = height, one transparent border = width · equilateral: height = width × √3 ÷ 2
For left and right triangles the roles swap: the top and bottom borders are half the height, and the colored side border is the width. clip-path lists the corners as percentages of the box.
Example
The default upward triangle, 100 × 80 px in #2563eb, is border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 80px solid #2563eb; on a 0 × 0 box, or clip-path: polygon(50% 0, 100% 100%, 0 100%) on a 100 × 80 box. Ticking Equilateral changes the height to 100 × √3 ÷ 2 = 86.6 px.
Frequently asked questions
How do I add a tooltip arrow with this?
Put the CSS on a ::before or ::after pseudo-element of the tooltip (with content: "" and absolute positioning), using the direction that points toward the target.
Can a CSS triangle have a border or shadow?
Not directly. Stack a slightly larger triangle behind it for a border, or use filter: drop-shadow(), which follows the triangle's shape instead of the box.
Border trick or clip-path?
Both work in all current browsers. clip-path is easier to read and can be filled with a gradient or image; the border trick has the longest history and needs no extra size.
Sources
Last updated:
Page address with these inputs: https://kakao.mobile/tools/css-triangle-generator/
Cite or embed this tool
kakaoCalc. (2026, November 8). CSS Triangle Generator. https://kakao.mobile/tools/css-triangle-generator/
“CSS Triangle Generator.” kakaoCalc, 8 Nov. 2026, kakao.mobile/tools/css-triangle-generator/.
Paste this code into your page. The widget runs in your visitors' browsers, shows no ads and keeps a link back to this page. Embedding terms