CSS triangle generator
Pick a direction, a size and a color and get a triangle made of CSS only. Two versions are shown: the classic zero-size box with borders, and a modern clip-path polygon.
Runs in your browser: nothing you enter is sent anywhere.
How to use it
- Choose a direction from the eight options.
- Set the width and height of the triangle’s bounding box, in pixels.
- Pick a color.
- Copy either the border technique or the
clip-path version.
How it works
For the border technique the element gets width: 0; height: 0 and borders. An upward triangle uses border-left and border-right of half the width in transparent, and a colored border-bottom as tall as the triangle. Left and right triangles swap the roles of width and height. Corner triangles need only two borders.
The alternative gives the element its full size and cuts it with clip-path: polygon(...), for example polygon(50% 0, 0 100%, 100% 100%) for an upward triangle.
Example
A 100 by 80 px blue triangle pointing up uses border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 80px solid #3366cc;.
Tips
- For a tooltip arrow, make the triangle small, for example 10 by 6, and position it with
position: absolute.
- A
clip-path element can have a border-less background, but its shadow is clipped too. Use filter: drop-shadow() on a parent for a shadow.
- The border version cannot hold text or a gradient; use
clip-path when you need that.
Frequently asked questions
How does the border triangle trick work?
An element with zero width and height is only its borders, and where two borders meet the browser draws a diagonal. Making the side borders transparent leaves one colored border as a triangle. The sizes of the borders set the triangle's width and height.
Should I use the border trick or clip-path?
clip-path is easier to read and gives the element a real width and height, so you can add a gradient or an image as background. The border trick works in very old browsers and is handy for small arrows on tooltips. The tool gives you both.
What are the corner directions?
They are right triangles with the right angle in a corner of the box: up-left, up-right, down-left and down-right. Each is built from one colored border and one transparent border.
Why do odd widths give half pixels?
Straight triangles split the width into two equal side borders. A width of 25 gives 12.5px on each side. Browsers handle that, but some round it on low-density screens, so even numbers are the safer choice.