Ω
OmniToolbox

CSS Triangle Generator

Generate pure CSS triangles using border properties. Perfect for tooltips and dropdown arrows.

Direction

•
100px
100px

CSS Code

width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #3B82F6;

How CSS Triangles Work

CSS triangles are created by utilizing transparent borders. By setting a box's width and height to zero and manipulating the widths and colors of its borders, you can form solid triangles pointing in any direction without needing images or SVGs.

Generate CSS Triangles Instantly

Because HTML elements are inherently rectangular, creating triangles in CSS requires a clever trick involving transparent borders. Our CSS Triangle Generator automates this hack, allowing you to visually configure arrows and tooltips without doing the math.

The Border-Width Hack Explained

If an HTML element has zero width and zero height, its borders meet at the center. By making three of the borders transparent and giving the fourth border a solid color, a perfect triangle is formed. Our tool leverages this to create:

How to Use This Tool

  1. Upload or Input Data: Select your file or paste your data directly into the tool interface. Everything remains on your device.
  2. Configure & Process: Adjust any optional settings if necessary. The tool will process your data instantly inside your browser.
  3. Download Result: Preview the output and click the download or copy button to save your final results.

Frequently Asked Questions

Why not just use an SVG?

SVGs are great, but for a tiny tooltip arrow, a pure CSS triangle is often preferred because it requires zero extra HTTP requests and seamlessly matches the background color defined in your stylesheet.

How do I attach it to my tooltip?

The best practice is to apply the generated CSS to a pseudo-element like `::before` or `::after` on your main tooltip container, and use `position: absolute` to push it to the edge.

Can I add a border or shadow to the triangle?

Because the triangle *is* a border, adding a traditional `box-shadow` will outline the invisible rectangle. Instead, use `filter: drop-shadow()` which respects the transparent borders.