RootUtils

CSS Triangle Maker

Client-Side Secure

Generate pure CSS triangles for tooltips and arrows visually.

Dimensions
Width 100px
Height 100px
Rotation0°
Preview
CSS Code
.triangle {
  width: 0;
  height: 0;
  border-left: 50px transparent solid;
  border-right: 50px transparent solid;
  border-top: 0;
  border-bottom: 100px #4f46e5 solid;
}

Is this tool broken?

Let us know if you found a bug or have a feature request.

CSS & Tailwind Triangle Generator

Create pure CSS triangles without using images or SVGs. The RootUtils Triangle Generator creates standard CSS code OR Tailwind CSS classes instantly.

Tailwind Triangle Support

We are one of the few tools that generate Tailwind Arbitrary Values (e.g. border-l-[50px]). This allows you to copy-paste the code directly into your React, Vue, or Next.js projects without adding custom CSS classes.

How the CSS Border Hack Works

In CSS, borders meet at 45-degree angles. If you set an element's width and height to zero, the borders collapse into four triangles. By making three of those borders transparent and coloring the fourth one, you are left with a perfect triangle.

You might also like

Clip-Path Maker

Free online Clip-Path Maker. Create complex CSS polygon shapes visually with this drag-and-drop.

Box Shadow Gen

Free online CSS Box Shadow Generator. Create beautiful, layered shadows visually. Copy the CSS code instantly for your web design projects.

Glassmorphism Gen

Free CSS Glassmorphism Generator. Create beautiful frosted glass effects for your UI. Customize blur, transparency, and color. Copy CSS instantly.