Loading…

How to use CSS Triangle Generator

Choose the direction, size and color; the tool builds the border-trick triangle and gives you the copyable CSS.

Frequently asked questions

How does the CSS triangle trick work?

A zero-size element with thick borders shows only one colored border edge as a triangle while the others stay transparent.

What are CSS triangles used for?

Tooltip and speech-bubble tails, dropdown carets, and simple arrow indicators without images.

Can I point the triangle any direction?

Yes — choose up, down, left or right and the border widths and colors adjust to point that way.

More CSS Generators

CSS Color Palette Generator
Generate harmonious color palettes as CSS custom properties
PX to REM Converter
Convert px to rem and rem to px with adjustable root font size
CSS Specificity Calculator
Score any CSS selector
CSS Pattern Generator
Create pure-CSS background patterns from gradients, no images
Cubic Bezier Editor
Build cubic-bezier easing curves with a live animated preview
CSS Text Stroke Generator
Add outlined text with -webkit-text-stroke and live preview
CSS Outline Generator
Generate outline width, style, color and offset with preview
CSS Backdrop Filter Generator
Build backdrop-filter blur, brightness and saturation effects
CSS Blend Mode Generator
Preview all mix-blend-mode values on overlapping shapes
CSS Mask Fade Generator
Fade element edges with mask-image linear gradients
CSS 3D Perspective Generator
Rotate elements in 3D space with perspective and live preview
CSS Aspect Ratio Generator
Get aspect-ratio plus the padding-hack fallback for any ratio

← View all CSS GeneratorsBrowse all 1,100+ tools →