CSS Triangle Generator
Generate CSS triangles using the border trick.
CSS Output
Generate CSS triangles using the border trick.
This free CSS Triangle Generator from KX Toolkit is part of our all-in-one online toolkit. It runs entirely in your browser, so your data never leaves your device for client-side operations. 100% free, forever - no paywall, no credit card, no trial.
How to use the CSS Triangle Generator
- Adjust the visual controls in the tool.
- See the live preview update instantly.
- Read the generated CSS code below the preview.
- Copy the code and paste it into your stylesheet.
What you can do with the CSS Triangle Generator
- Skip writing CSS by hand for gradients and shadows.
- Prototype layouts with flexbox/grid generators.
- Generate hover/focus animations without keyframes by hand.
- Build component styles faster.
Why use KX Toolkit's CSS Triangle Generator
- Browser-based: Works on Windows, macOS, Linux, iOS and Android - no install, no extension.
- Privacy-first: Client-side tools never upload your data; server-side tools delete files right after processing.
- Mobile-friendly: Full feature parity on phones and tablets - not a stripped-down view.
- Fast: Optimised for instant feedback. No artificial waiting screens, no email-gated downloads.
- One hub for everything: 300+ tools across SEO, text, image, PDF, code, color, calculators and more - skip switching between sites.
Tips for the best results
Generators are a starting point - always tweak the final values for your design system rather than shipping defaults.
Related CSS Tools
If you find this tool useful, explore the full CSS Tools collection or browse our complete tool directory. KX Toolkit is built for marketers, developers, designers, students and anyone who needs a quick utility without signing up for yet another SaaS.
How does the CSS triangle border trick work?
Set an element's `width` and `height` to 0 and apply borders. Each border meets its neighbors at a 45-degree angle, forming a triangle when three sides are transparent and one side is colored. For example, `border-bottom: 20px solid red; border-left: 10px solid transparent; border-right: 10px solid transparent;` produces an upward-pointing triangle. Adjust border widths to control the triangle's proportions.
How do I point the triangle in different directions?
Color the border on the side opposite to the direction you want the triangle to point. Color the bottom border for an up arrow, the top border for a down arrow, the right border for a left arrow, and the left border for a right arrow. The two perpendicular borders should be transparent, and you can adjust their widths to make the triangle wider or narrower.
When should I use clip-path triangles instead?
Use `clip-path: polygon(50% 0, 100% 100%, 0 100%)` when you need the triangle to be an actual element with content inside, like a callout pointer with text. The border trick gives you a zero-size empty box, which is fine for decorative arrows but not for content. clip-path triangles also support animation between shapes and can include backgrounds, gradients, and images that fill the triangular area.
Can I make right triangles or scalene triangles?
Yes. For a right triangle, leave one of the perpendicular borders at 0 and color the diagonal border. For example, `border-top: 50px solid red; border-right: 50px solid transparent;` makes a right triangle with the right angle in the top-left. For scalene shapes, use unequal border widths or switch to clip-path with three custom polygon points.
How do I create speech-bubble pointers?
Position a triangle (border or clip-path) absolutely on a parent that holds the bubble's rounded rectangle background. The triangle should match the bubble's background color and sit slightly outside the bubble's edge. For pointers with borders, you'll need two stacked triangles: a slightly larger one matching the bubble's border color and a smaller one in the fill color, offset by 1-2px to reveal a thin border line.
Why is the border trick still useful in modern CSS?
It's lightweight, universally supported, and requires no extra markup or images. While clip-path is more flexible, the border trick is perfect for tiny decorative arrows like dropdown indicators, tooltip pointers, and accordion chevrons. It also performs slightly better than clip-path on older devices because borders are a fundamental rendering primitive that's been optimized in browsers for decades.
No reviews yet
Be the first to share your experience with the CSS Triangle Generator.