Zero Image Assets · Pure Border Hack · 8 Directions

CSS Triangle Generator

Create crisp CSS border triangles for tooltips, modal pointers, carets, and badges without SVGs or external image files.

Presets:

Pointing Direction

Dimensions & Color

Triangle Width30px

Triangle Height30px

Triangle Color

Live Preview

Generated CSS

.css-triangle {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 15px 30px 15px;
  border-color: transparent transparent #3b82f6 transparent;
}

How CSS Border Triangles Work

The Zero-Dimension Border Intersection Trick

When an HTML element has width: 0 and height: 0, adjacent CSS borders meet at diagonal 45-degree angles.

By setting the desired side border to an opaque color while keeping opposing borders transparent, a sharp triangular geometric wedge is rendered purely by the browser rendering engine.

Pseudo-Elements vs. Standalone Nodes

Using ::before or ::after pseudo-elements is standard practice for tooltips and dropdown menus.

This approach keeps your markup clean without introducing unnecessary DOM elements. Simply set position: absolute on the pseudo-element and anchor it to the parent container.