AI CSS Triangle Generator — Create Pure CSS Triangles Without Images

CSS triangles are everywhere in web design. Tooltip arrows, dropdown carets, breadcrumb separators, accordion indicators, notification badges. Every time you see a small pointing shape in a UI, there is a good chance it is a pure CSS triangle made with the border trick. No images, no SVGs, just a clever use of how CSS renders borders on a zero-sized element.

The technique is elegant but unintuitive. Getting the exact size, direction, and proportions right requires mental math that most developers would rather skip. An AI CSS triangle generator lets you pick the direction, set the dimensions, choose colors, and copy the code. What used to take trial and error now takes seconds.

How the CSS Border Triangle Trick Works

The CSS triangle relies on a simple observation: when you give an element zero width and zero height, its borders meet at diagonal lines. Each border forms a triangle shape. By making three borders transparent and one colored, you get a visible triangle pointing in the opposite direction of the colored border.

/* Basic downward-pointing triangle */
.triangle-down {
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 24px solid #6c5ce7;
}

/* The colored border (top) creates a triangle pointing down */

The logic is counterintuitive at first. A colored border-top creates a triangle pointing down. A colored border-bottom points up. A colored border-left points right. The triangle always points away from the colored border.

Controlling Size and Proportions

The width of the triangle is controlled by the two transparent borders. The height is controlled by the colored border. For an equilateral-looking triangle, the transparent borders should be roughly 58% of the colored border (the exact ratio is 1/√3). For a right-angle triangle, make one transparent border zero:

/* Right-angle triangle pointing bottom-left */
.triangle-right-angle {
  width: 0;
  height: 0;
  border-top: 30px solid #00cec9;
  border-right: 30px solid transparent;
}

/* Isosceles triangle (equal sides) */
.triangle-iso {
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-bottom: 26px solid #6c5ce7; /* 15 × √3 ≈ 26 */
}

Common Triangle Patterns in UI Design

Tooltip Arrows

The most common use of CSS triangles is the small arrow that connects a tooltip to its trigger element. The arrow is typically a pseudo-element (::before or ::after) positioned absolutely relative to the tooltip container:

.tooltip {
  position: relative;
  background: #1e1e2e;
  color: #e2e2e8;
  padding: 8px 12px;
  border-radius: 6px;
}

.tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid #1e1e2e;
}

The arrow color must match the tooltip background exactly. If the tooltip has a border, you need two triangles: a slightly larger one in the border color behind a smaller one in the background color. This double-triangle technique creates the illusion of a bordered arrow.

Dropdown Carets

Select elements and dropdown menus use small triangles as open/close indicators. A downward caret signals "click to expand," while an upward caret means "click to collapse." The transition between states can be animated with CSS transforms:

.caret {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid currentColor;
  transition: transform 0.2s ease;
}

.dropdown.open .caret {
  transform: rotate(180deg);
}

Using currentColor makes the caret inherit the text color of its parent, so it automatically matches the surrounding text without hardcoding a color value.

Breadcrumb Separators

Right-pointing triangles work as breadcrumb separators. Instead of using a text character like >, a CSS triangle gives you precise control over size and color. Place it as a pseudo-element on each breadcrumb item except the last:

.breadcrumb li:not(:last-child)::after {
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 5px solid #8888a0;
  margin: 0 8px;
  vertical-align: middle;
}

Modern Alternatives: clip-path Triangles

The border trick works everywhere, but CSS now offers a cleaner approach with clip-path. A clip-path: polygon() can create a triangle on any element, including elements with content, backgrounds, and gradients:

/* Triangle using clip-path */
.triangle-clip {
  width: 40px;
  height: 35px;
  background: #6c5ce7;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

/* The element has actual dimensions, unlike the border trick */

The advantage of clip-path is that the element retains its width and height. You can put content inside it, apply gradients, and even animate the polygon points. The border trick creates a zero-sized element, which limits what you can do with it.

The tradeoff is browser support. The border trick works in every browser back to IE6. clip-path: polygon() works in all modern browsers but not in IE11. For most projects in 2026, clip-path is the better choice. For maximum compatibility or when you need a simple arrow on a pseudo-element, the border trick remains reliable. Learn more about creative CSS shapes with the AI CSS Clip Path Generator.

Animated Triangles

CSS triangles can be animated, but the approach differs between the border trick and clip-path. With the border trick, you can animate the border widths and colors using transitions. With clip-path, you can animate the polygon points for morphing effects:

/* Animate clip-path triangle to rectangle */
.morph {
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  transition: clip-path 0.3s ease;
}

.morph:hover {
  clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 100% 0%);
}

This morphing effect is impossible with the border trick. If your design calls for shape transitions, clip-path is the only CSS-only option. For more animation techniques, see the AI CSS Animation Generator guide.

Accessibility Considerations

CSS triangles are purely decorative. They carry no semantic meaning and are invisible to screen readers, which is usually the correct behavior. An arrow on a tooltip or a caret on a dropdown is a visual affordance, not content.

However, if a triangle is the only indicator of state (like an accordion being open or closed), ensure that the state is also communicated through ARIA attributes. The aria-expanded attribute on the trigger element tells assistive technology whether the content is visible, regardless of the visual triangle direction.

For interactive triangles that serve as click targets (like play buttons), ensure the clickable area is large enough. A 5px CSS triangle is too small to tap on mobile. Wrap it in a button element with adequate padding and an accessible label.

Build Your CSS Shape Toolkit

Triangles are one building block in a larger CSS shapes toolkit. Combine them with other CSS techniques for richer designs:

• AI CSS Clip Path Generator for complex polygons, circles, and custom shapes
• AI Border Radius Generator for rounded corners and organic blob shapes
• AI CSS Filter Generator for visual effects like blur, shadows, and color shifts
• AI Box Shadow Generator for depth and elevation
• AI Gradient Generator for color transitions and backgrounds

The AI CSS Triangle Generator handles the geometry so you can focus on design. Pick a direction, set the size, choose your color, and copy the code. No more guessing which border to make transparent.