What is CSS Triangle Generator?

CSS Triangle Generator is a visual tool that helps you create CSS triangles quickly and accurately. Instead of manually calculating border values or clip-path coordinates, simply choose your direction, adjust the size and color, and copy the generated code.

Two CSS Methods

The tool supports two popular methods for creating CSS triangles:

Classic

Border Trick

The classic approach using transparent borders. Works in all browsers including older ones. The element has zero width and height, with colored borders creating the triangle shape.

Maximum browser support
IE11 compatible
Zero width/height element

Modern

Clip-path

A modern approach using clip-path: polygon(). Produces cleaner, more readable code with explicit width and height values. The triangle is created by clipping a colored rectangle into a triangular shape.

Cleaner code structure
Modern browsers only
Explicit dimensions

When to Use CSS Triangles

Tooltip Arrows

Small triangles pointing to content

Dropdown Carets

Indicators for expandable menus

Decorative Elements

Geometric accents in layouts

Breadcrumb Separators

Chevron-style navigation indicators

Corner Ribbons

Diagonal corner decorations

How to Use

Choose a Direction

Click one of the 8 direction buttons in the grid. The four cardinal directions (top, right, bottom, left) create standard triangles, while the four diagonal directions (top-left, top-right, bottom-left, bottom-right) create right-angle corner triangles.

Set the Size

Use the Width and Height sliders or type exact values (1–500px). Click the lock button to maintain a 1:1 aspect ratio — changing one dimension will automatically update the other.

Pick a Color

Use the color picker for any custom color, or click one of the preset swatches for quick selection. The preview and code output update instantly.

Select a Method

Choose between Border (classic border trick) or Clip-path (modern polygon approach). Both produce the same visual result but with different CSS code.

Copy the Code

The CSS code panel shows the generated code for the active method. Use the tab switcher to compare both methods. Click Copy CSS to copy the code to your clipboard.

Pro Tip: Browse the preset gallery for common triangle shapes. Clicking a preset instantly applies its direction and dimensions, making it easy to start from a known configuration and fine-tune from there.

Features

8-Direction Support

Create triangles pointing in any of 8 directions. The four cardinal directions produce isosceles triangles, while the diagonal directions create right-angle triangles perfect for corner decorations.

Precise Size Controls

Adjust width and height independently from 1 to 500 pixels using sliders or direct number input.

Slider or direct input
Lock aspect ratio option
1–500px range

Color Customization

Pick any color using the native color picker, or quickly select from 8 preset swatches covering the most commonly used colors.

Custom color picker
8 preset swatches
Instant preview updates

Dual CSS Methods

Generate code using two different CSS techniques:

Border trick — Maximum browser support
Clip-path polygon — Cleaner modern code

Live Preview

See your triangle rendered in real-time on a checkerboard background pattern. Large triangles automatically scale down to fit the preview area while maintaining accurate proportions.

Built-in Presets

12 presets cover common use cases with mini previews showing exact shapes.

Standard arrows (4 directions)
Tooltip & dropdown carets
Corner triangles & flags

Instant Code Generation: The code updates instantly as you modify any setting, and the copy button lets you grab the code with a single click.

FAQ

Which method should I use — border trick or clip-path?

Use the border trick if you need to support older browsers (IE11 and below). Use clip-path for modern projects where you want cleaner, more readable CSS. Both produce visually identical results.

Recommendation: For new projects targeting modern browsers, clip-path offers cleaner code and better maintainability.

How does the CSS border trick create a triangle?

When an element has zero width and height, its borders meet at diagonal lines. By making some borders transparent and one border colored, only the colored border's triangular area is visible, creating the triangle shape.

Key concept: The triangle isn't drawn — it's revealed by hiding parts of the border intersection.

Can I create equilateral triangles?

Yes. For an equilateral-looking triangle pointing up or down, set the width to about 1.15× the height (e.g., 115×100). For mathematically precise equilateral triangles, the width should equal height × 2 / √3.

Visual approximation: width = height × 1.15
Mathematical precision: width = height × 2 / √3 (≈ 1.1547)

What are diagonal direction triangles used for?

Diagonal triangles (top-left, top-right, bottom-left, bottom-right) create right-angle corner shapes. These are commonly used for:

Corner ribbons and badges
Decorative page corners
Folded-corner effects on cards
Geometric design accents

Why does my triangle look blurry at small sizes?

Very small triangles (under 10px) may appear blurry due to sub-pixel rendering. This is a browser rendering limitation. If possible, use slightly larger sizes or ensure dimensions result in whole-pixel border values.

Best practice: Keep triangle dimensions at 10px or larger for crisp rendering across all browsers.

Can I animate CSS triangles?

Border-trick triangles can animate border-width and border-color. Clip-path triangles offer more flexibility — you can animate the polygon points, background color, width, and height for smooth shape transitions.

Border Method

Limited Animation

Border width
Border color

Clip-path Method

Full Animation

Polygon points
Background color
Width & height
Shape morphing