CSS Triangle Generator

Generate pure CSS border triangles, tooltip arrows, and dropdown carets with live preview and Tailwind CSS export.

CSS Triangle Border Builder

Triangle Orientation / Pointing Direction

Width20px

Height20px

Triangle Color

Rendered using zero HTML elements or SVGs — 100% CSS borders

Generated Code

.css-triangle {
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 20px solid #2563eb;
}

High-Performance Vector Graphics via CSS Border Geometry

Before SVG became ubiquitous, front-end engineers pioneered the border hack to render razor-sharp vector arrows without inflating page weight. Today, CSS triangles remain the industry standard for lightweight tooltips, popovers, and navigation badges because they attach seamlessly to pseudo-elements without adding clutter to your HTML markup.

Use Cases

✓
Tooltip & Popover Pointers
Attach sleek directional arrows to floating tooltips, user onboarding tours, and interactive popovers using CSS pseudo-elements (`::before` or `::after`).
✓
Dropdown Menu & Accordion Chevrons
Create lightweight navigational carets that indicate collapsed or expanded UI states without loading external icon web fonts.
✓
Breadcrumb & Speech Bubble Tails
Build classic conversational dialog bubbles, ribbon tags, and multi-step progress breadcrumbs with zero raster image assets.
✓
Corner Ribbons & Discount Badges
Utilize diagonal corner triangles (top-left, bottom-right) to render angled sale banners across e-commerce product thumbnails.

Key Capabilities

✓

8-Directional Geometry

Supports Cardinal (Top, Right, Bottom, Left) and Ordinal diagonal angles (Top-Left, Top-Right, Bottom-Left, Bottom-Right).

✓

Pure CSS Border Hack Algorithm

Generates pixel-perfect triangles by exploiting 0px width/height element borders for maximum cross-browser rendering fidelity.

✓

Pseudo-Element (::after) Syntax

Instantly toggle to absolute-positioned pseudo-element boilerplate ready to paste into tooltip stylesheet rules.

✓

Tailwind CSS Arbitrary Value Export

Generate modern utility class chains compatible with Tailwind CSS v3 and v4 projects without editing global CSS files.

Frequently Asked Questions

How do pure CSS triangles work?

When an HTML element has zero width and zero height (`width: 0; height: 0;`), but has thick borders applied, the adjacent borders meet at 45-degree angles. By coloring one border and making the opposing borders transparent (`solid transparent`), a clean triangle is formed.

Why use CSS triangles instead of inline SVGs?

CSS triangles require zero extra DOM nodes when applied using `::after` or `::before` pseudo-elements. They require no image network requests, load instantaneously, and can be tinted dynamically via CSS variables or hover states.

How do I center a CSS triangle on a tooltip?

Add `position: absolute; left: 50%; transform: translateX(-50%);` to the triangle element, and ensure the parent tooltip container has `position: relative;`.

Does this work in all browsers?

Yes! The CSS border triangle technique is supported across 100% of browsers including legacy Internet Explorer, modern Chrome, Safari, Firefox, and mobile engines.