ZeroServer.tools

CSS Triangle Generator

Generate CSS triangles with the border trick.

Direction

Size50px

Color

CSS

.triangle {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 50px solid #00f2fe;
}

The CSS border triangle trick

A zero-width, zero-height element shows only its borders, and each border meets its neighbors on a diagonal. By making three borders transparent and giving the fourth a color, you get a crisp, scalable triangle with no images or SVG. The pointing direction is set by which border carries the color. Copy the generated CSS straight into tooltips, dropdown arrows, and carets.