CSS Triangle Generator

How to use

1. Pick a Direction — Choose one of 8 directions — four cardinal arrows or four corner triangles.
2. Set Size — Adjust the triangle's base in pixels. Larger values produce bigger triangles.
3. Pick a Color — Choose any CSS color. The preview updates live.
4. Copy CSS — Copy the generated CSS class and paste it into your stylesheet.

Free CSS Triangle Generator

Generate pure-CSS triangles for tooltips, speech bubbles, dropdown carets, ribbons, and badges. No SVG, no images, no extra HTTP requests. Pick a direction, size, and color — copy production-ready CSS.

How CSS Triangles Work

A box with zero width and height does not render its content but still renders its borders. When two adjacent borders are set thick, they meet at a 45-degree diagonal. Setting two borders transparent and one solid produces a triangle pointing in the direction of the solid border.

Use With Pseudo-Elements

Triangles look best as ::before or ::after pseudo-elements attached to tooltips, dropdowns, or chat bubbles. Position the pseudo-element absolutely and the parent becomes a self-contained speech bubble.

Privacy

All preview and code generation happen locally in your browser.

Related: Box Shadow Generator, Border Radius Previewer, CSS Gradient Generator.

Frequently asked questions

How does CSS draw a triangle without SVG?

By giving an element width and height of 0 and using thick transparent and solid borders. Where two borders meet they form a 45-degree slope — the visible solid border becomes a triangle.

Why not just use SVG?

CSS triangles add zero HTTP requests, work on any element via pseudo-elements (::before, ::after), and inherit the element's color via currentColor. Perfect for tooltips, dropdowns, and ribbons.

Can I make the triangle responsive?

Yes. Use em or rem instead of pixels in the border values so the triangle scales with the parent font-size.

Will this work in old browsers?

Yes. CSS border triangles work in every browser, including Internet Explorer 6 and up.

Related free tools

• Text Shadow Generator — Design CSS text shadows with a visual editor and live preview.
• Placeholder Image Generator — Generate placeholder images with custom size, color, and text.
• Color Palette Generator — Generate harmonious color palettes from any base color.
• Color Contrast Checker — Check WCAG 2.1 contrast ratio with AA / AAA pass marks for normal text, large text, and UI components.
• CSS Clamp Generator — Build fluid clamp() expressions for responsive typography and spacing — no media queries needed.
• Pixel to REM Converter — Live two-way px ↔ rem conversion with custom root font-size. Built for accessible, user-respecting design.
• Color Blindness Simulator — Preview images and UI through protanopia, deuteranopia, tritanopia, and achromatopsia simulations.
• CSS Unit Converter — Convert any CSS length unit to all others with customizable base font-size and viewport dimensions.
• CSS Cubic Bezier Generator — Design custom easing curves visually with live curve and animation preview. Production-ready CSS.
• CSS Glassmorphism Generator — Design frosted-glass UI panels with backdrop blur, opacity, saturation, and tint. Live preview.
• CMYK Color Converter — Convert HEX and RGB to CMYK percentages for print. Two-way conversion with live preview.
• Neumorphism Generator — Design soft, extruded UI elements with adjustable shadow depth, blur, and shape style.