How do CSS triangles work with borders?

CSS triangles use the border trick: set an element's width and height to 0, then set three borders — two transparent and one colored. The browser renders the colored border as a triangle because that's how border corners collapse when there is no visible box area.

What is the difference between the border trick and clip-path?

The border trick works by collapsing borders on a zero-size element — it's supported in every browser including IE8+. The clip-path method clips a normal element (with width, height, and background) into a triangle shape — it's more flexible (works with images and gradients) but requires a modern browser.

Can I use a CSS triangle as a tooltip arrow?

Yes! The border-trick triangle is perfect for tooltip arrows and speech-bubble tails. Position it with ::before or ::after pseudo-elements using position: absolute so it sits flush against your tooltip container.

Why does the diagonal triangle look like a right triangle?

Diagonal triangles (top-left, top-right, etc.) are right isoceles triangles formed by setting two adjacent borders — one colored and one transparent — to equal sizes. This creates a 90-degree corner at the box corner and a hypotenuse across the diagonal.

Is this tool free to use?

Yes, completely free. All processing happens in your browser — nothing is sent to a server. No account required.

Pure CSS — No Images Required

Generate CSS Triangles
Instantly

Pick a direction, size, and color — get clean CSS code for the classic border trick or modern clip-path. Works in every browser. 100% free.

🎯

8 Directions

Generate triangles pointing up, down, left, right, or any corner — all from the same tool.

⚡

Two CSS Methods

Classic border trick for zero-size boxes, or modern clip-path that works with backgrounds and gradients.

📋

Copy-Ready Code

Clean, production-ready CSS output. Click once to copy — paste directly into your stylesheet.

Direction — Up

CSS Method

Zero-size element. Diagonal directions produce right isosceles triangles.

Size — 80px

20px200px

Color

Preview

Generated CSS

.triangle {
  width: 0;
  height: 0;
  border-left: 40px solid transparent;
  border-right: 40px solid transparent;
  border-bottom: 80px solid #3b82f6;
}

Tip: Add this class to an empty <div> or a ::before / ::after pseudo-element to keep your HTML clean.

Frequently Asked Questions

Everything you need to know about CSS Triangle Generator.

Generate CSS TrianglesInstantly

8 Directions

Two CSS Methods

Copy-Ready Code

Frequently Asked Questions

Generate CSS Triangles
Instantly