CSS Triangle Generator

Visually design CSS border-based triangles in all 8 directions with custom sizes and copy the generated code.

Triangle Width (Base): 100px
Triangle Height: 100px
Triangle Color
Dimension Shape Presets
Preview Backdrop Color
CSS Code Output
width: 0;
height: 0;
border-style: solid;
border-width: 0 50px 100px 50px;
border-color: transparent transparent #4ade80 transparent;
Tailwind CSS Border equivalent
w-0 h-0 border-solid border-t-[0px] border-r-[50px] border-b-[100px] border-l-[50px] border-t-transparent border-r-transparent border-b-[#4ade80] border-l-transparent
6.584 viewsYour data is processed in your browser and never sent to a server.

Related tools

JSON Formatter
Validate, beautify and minify JSON online. Everything runs in your browser — free and private.
Base64 Converter
Encode or decode Base64 text instantly in your browser. Free and private.
URL Encoder
Encode or decode URLs and query strings instantly in your browser. Free and private.
Color Picker
Pick any color and instantly get its HEX, RGB and HSL codes for CSS and design tools. Free, private, runs in your browser.

Get to know this tool

CSS Triangle Generator builds a pointer-style triangle shape using nothing but the classic CSS border trick — no images, no SVG files, just a few lines of code you can drop straight into your stylesheet.

What is CSS Triangle Generator and Why is it Useful?

Triangles are everywhere in UI design — dropdown arrows, speech bubble tails, tooltip pointers, and decorative accents. Building one from scratch means remembering the border trick: a zero-width, zero-height element with transparent borders on three sides and a colored border on the fourth. This tool lets you pick the direction, size, and color visually and get the exact CSS instantly, without re-deriving the border math every time.

Key Features

  • Four Directions: Generate triangles pointing top, bottom, left, or right.
  • Adjustable Size: Control the triangle's size in pixels to fit your design.
  • Any Color: Use the color picker to match your triangle to your brand or UI palette.
  • Live Preview: See the exact triangle rendered in real time as you change any setting.
  • Copy-Ready CSS: The full width, height, border-style, border-width, and border-color declarations are generated for you.

How to Use This Tool?

  1. Choose a Direction for the triangle to point (top, bottom, left, or right).
  2. Set the Size in pixels.
  3. Pick a Color using the color swatch.
  4. Watch the live preview update instantly, then copy the generated CSS Code and paste it into your stylesheet on any element with width: 0; height: 0;.

Why Choose Our Client-Side Tool?

This is a purely visual, computational tool — there's no reason it should ever need to contact a server. All the border-width and border-color math happens instantly in your browser via JavaScript, so the preview updates the moment you move a slider or pick a color, with zero network delay and zero data collection.

Frequently Asked Questions (FAQ)

Why does the triangle use border instead of an image or SVG?

CSS-only triangles add zero extra HTTP requests and scale perfectly at any resolution since they're rendered by the browser, not loaded from a file.

Can I make a triangle pointing diagonally (e.g., top-left)?

This tool generates the four primary directions (top, bottom, left, right). Diagonal triangles require a different CSS technique combining clip-path instead of borders.

Why is the element's width and height set to 0?

The visible triangle is formed entirely by the borders. If the element had a non-zero width or height, the triangle would be distorted or hidden behind a visible box.

Does this work in all browsers?

Yes, the CSS border-triangle technique is supported in every modern and legacy browser, since it only relies on the border property.