CSS Triangle Generator

Create CSS triangles visually with a live preview. Pick a direction, size, and color, switch between the border-trick and clip-path methods, and copy ready-to-use CSS.

.triangle { width: 0; height: 0; border-left: 60px solid transparent; border-right: 60px solid transparent; border-bottom: 100px solid #10b981; }

No More Guessing Border Widths

Triangles show up everywhere in interfaces: dropdown carets, tooltip arrows, ribbon corners, and decorative shapes. Instead of hand-calculating border widths or clip-path points, pick a direction and drag a few sliders until the preview looks right.

Why Use This Generator?

Two Proven Methods

Switch between the classic border trick, which works in every browser, and clip-path, which supports gradients and smooth shape animations.

Instant Live Preview

Every slider and color change updates the triangle immediately, so you can match a design file or spot an issue before copying anything.

Clean, Ready-to-Use CSS

The output is a single, correctly formatted CSS rule with no extra markup, ready to paste into a stylesheet, styled-component, or CSS module.

Works On Any Device

The layout and controls are built for touch and small screens, so you can fine-tune a triangle just as easily on a phone as on a desktop.

How this CSS Triangle Generator works

Two techniques dominate CSS triangle creation, and they solve different problems. The border trick sets an element's width and height to zero, then relies on thick, mismatched borders meeting at sharp angles to fake a triangle shape. It has worked since Internet Explorer 6 and needs no special browser support, but it only produces a flat, single-color shape. Clip-path takes the opposite approach: it cuts a triangular window out of a normal box, so the shape can carry a gradient, a background image, or animate smoothly into another polygon. This generator builds both versions from the same controls, so you can compare them side by side.

Pick one of eight directions: the four cardinal points for symmetrical triangles, or the four corners for right-angled shapes suited to ribbon corners and folded-edge effects. Drag the width and height sliders to reshape the triangle, and set a color with the picker or by typing a hex value. The preview updates on every change, rendered with the exact CSS the tool hands you, not an approximation.

Switch the background behind the preview to check how the shape reads on light, gray, or dark surfaces before committing to a color. Once it looks right, copy the CSS block below the preview: a border-trick rule if you chose that method, or a width, height, background-color, and clip-path declaration if you picked the other. Nothing you build here is uploaded or stored; the code stays in your browser until you copy it out.

How to use this CSS Triangle Generator

1

Pick a direction and method

Choose which way the triangle should point and whether you want the classic border trick or a clip-path shape.

2

Adjust size and color

Drag the width and height sliders and set a color. The preview updates instantly so you can match your design.

3

Copy the CSS

Copy the generated code and paste it directly into your stylesheet or component.

Example Usage

A classic upward-pointing triangle using the border trick:

Input
Direction: Up, Method: Border Trick, Width: 120px, Height: 100px, Color: #10B981
Output
.triangle { width: 0; height: 0; border-left: 60px solid transparent; border-right: 60px solid transparent; border-bottom: 100px solid #10B981; }

Frequently Asked Questions

What is the difference between the border trick and clip-path for CSS triangles?
The border trick sets an element's width and height to 0 and uses thick, mismatched borders to fake a triangle shape. It works in every browser but only produces a flat, solid color. Clip-path cuts a shape out of a normal element, so it supports gradients, background images, and smooth CSS transitions between shapes, at the cost of needing a modern browser.
Which method should I use for a tooltip or dropdown arrow?
The border trick is usually enough for small decorative arrows since it needs no extra browser support and renders instantly. Reach for clip-path only if the arrow needs a gradient fill or you plan to animate it.
Can I animate a CSS triangle?
Yes, but only reliably with the clip-path method. You can transition between two polygon() values as long as both have the same number of points, which lets a triangle morph into another shape smoothly. Border-trick triangles cannot be animated the same way because borders do not interpolate as shapes.
Why does my triangle look like a square or a rectangle?
With the border trick, this happens when only one border side has a color and the opposite side is missing, or when the element still has padding, content, or a background color. Set width and height to 0 and give the element no padding or text content.
How do I make an equilateral triangle instead of a right-angled one?
Use the Up, Down, Left, or Right direction with matching width and height values. The four corner directions (Top Left, Top Right, Bottom Left, Bottom Right) produce right-angled triangles instead, which are useful for ribbon corners and folded-edge effects.
Can I add a border outline around the triangle shape itself?
Not directly with either method, since both techniques already use the border or clip-path properties to draw the shape. The common workaround is layering two triangles of slightly different sizes, with the larger one in the outline color sitting behind the smaller, filled one.
Does the border-trick method work in older browsers?
Yes. The border trick has worked in every browser since Internet Explorer 6, making it the safer choice if you need to support very old browser versions. Clip-path is supported in all current browsers but was added more recently.
Can I rotate the triangle to point in a direction that is not listed?
Yes. Pick the closest built-in direction, copy the CSS, and add a transform: rotate(Xdeg); declaration to the same rule. This rotates the whole shape to any angle you need.
Why is the triangle blurry when I make it very large?
CSS-drawn triangles are vector shapes rendered by the browser, so they stay sharp at any size, they do not blur like a scaled-up image. If the edges look soft, check for a CSS filter, box-shadow, or transform with a fractional scale applied elsewhere on the page.
Does this tool store or upload the triangles I create?
No. Every calculation happens locally in your browser using JavaScript. Nothing you design here is sent to a server or saved anywhere unless you copy and paste the CSS yourself.

Related Tools

Try It

CSS Formatter

Format CSS code for better readability.

Try It

CSS Beautifier

Beautify and format CSS code for better readability and structure.

Try It

Random Color Generator

Generate a random color

Try It

Gradient Generator

Generate the gradient using two colors

Try It

CSS Box-Shadow Generator

Design custom CSS box shadows with a live preview. Adjust offset, blur, spread, and color, stack multiple layers, and copy the code.

Try It

CSS Loader Generator

Build CSS loading spinners with a live preview. Pick a style, adjust size, color, and speed, then copy ready-to-use CSS and HTML.

The CSS Triangle Generator is maintained by CodeItBro. We aim to provide the best free developer tools on the web. If you have feedback or suggestions, please visit our contact page.

Comments

Questions, corrections, and useful tips are welcome. Comments are reviewed before publication.

Loading comments...

Comments are stored and moderated using Cusdis Cloud. Email is optional. Privacy Policy

As featured on

CodeItBro - Free dev tools + practical guides to help you ship faster | Product HuntCodeItBro - Free Online Developer Tools badgeCodeItBro badge