All tools

CSS Triangle Generator

Build pure-CSS triangles using the border trick.

width: 0;
height: 0;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-bottom: 60px solid #0ea5e9;

The CSS triangle trick uses a zero-size box and four border colors. The visible triangle is one border, the rest are transparent. Works in every browser.

About

The classic CSS triangle uses a zero-size box and four border colors, three transparent. This tool builds the CSS for you with sliders for direction, size, and color, plus a live preview.

How to use

  1. Pick a direction.
  2. Set width, height, and color.
  3. Copy the CSS.

FAQ

Why not just use SVG?+

You can. CSS triangles are useful when you need a tooltip arrow or speech-bubble pointer that inherits color from a parent and doesn't add markup.