utilyfe

CSS Triangle Generator

Start from a tooltip arrow, caret or speech bubble, or draw any triangle. Type any colour and copy working CSS.

Runs entirely in your browser. Nothing you enter is uploaded or stored.

What are you making?

ABC

Drag a corner, or Tab to it and use the arrow keys.

160 × 120 px · angles 67° / 56° / 57°

Shape

Direction

Points up

Arrow keys move between directions once the grid has focus.

px
px

Hex, rgb(), hsl(), oklch() or a colour name. Alpha works too.

Code

.triangle {  width: 0;  height: 0;  border-style: solid;  border-width: 0 80px 120px 80px;  border-color: transparent transparent #047857 transparent;}

The link stores the shape in the address itself. Nothing is saved on a server.

Border triangles work in every browser, but can't take a gradient or an image.

Also try:CSS Box Shadow GeneratorCSS Gradient GeneratorCubic Bezier Editor

How to use the CSS Triangle Generator

  1. 1Pick what you're making, a plain triangle, a tooltip arrow, a dropdown caret, a speech bubble, a play button or a step arrow, to start from sensible settings.
  2. 2Choose a direction on the grid. For a plain triangle you can also switch to Free-form and drag corners A, B and C, or Tab to a corner and move it with the arrow keys.
  3. 3Set the width, height and colour. Type a hex code, rgb(), hsl(), oklch() or a colour name; anything the browser wouldn't understand is pointed out as you type.
  4. 4Pick Border, clip-path, ::after or SVG, then copy the code, download it as a .css or .svg file, or copy a link that recreates the same triangle.

How the border trick works

A box’s borders meet at its corners along a diagonal line. With a width and height of zero there’s no box left in the middle, only the four borders, and each one is drawn as a triangle pointing at the centre. Making three of them transparent leaves a single coloured triangle. The border on the side opposite the point sets its height, and the two borders either side of it set how wide it is. That’s why a triangle pointing up is written with a bottom border: the colour sits where the base of the triangle is.

Choosing a method

Border triangles have been used for arrows and carets for twenty years and work everywhere, but a border can only be one colour. clip-path: polygon() starts from an ordinary box with a real width and height and cuts away everything outside the three points, so the triangle can be filled with a gradient, an image or anything else a background can hold. The ::after output is a border triangle drawn by a pseudo-element, which keeps small decorations out of your HTML. SVG is the choice for icons that have to scale cleanly or be used as an image.

Arrows on real elements

Most CSS triangles aren’t used on their own. They point out of a tooltip, hang off a speech bubble, sit next to a menu label or turn a label into a step in a progress bar. Picking one of those at the top shows the triangle on that element at its real size, and the code includes the element’s own styles so it works when pasted. The arrow is placed just outside the side it points out of, and it’s centred along that side unless you move it to the start or the end.

Any triangle, not just eight directions

The direction grid covers the triangles people need most often. For a plain triangle, Free-form mode covers the rest: drag the three corners anywhere, or move them with the arrow keys. The width and height fields stretch the shape, and the readout shows its size and all three angles. For border output the generator picks the longest side as the base, so none of the border widths is ever negative, and rotates the triangle into place.

Nothing leaves your browser

There’s no server behind this tool. The preview is drawn by your own browser and the code is written in the page as you work. The share link keeps its settings after the #, a part of the address that browsers don’t send anywhere.

Questions

How do you make a triangle in CSS?
Give an element no width and no height, then give it thick borders. Where two borders meet they're cut diagonally, so each border is drawn as a triangle. Colour one border and make its neighbours transparent and a single triangle is left. For a triangle pointing up that's border-width: 0 50px 80px 50px with only the bottom border coloured. A clip-path polygon does the same job on an element that does have a size.
Should I use border, clip-path, ::after or SVG?
Border triangles work in every browser and are the classic choice for small arrows, but they can only be one flat colour. clip-path cuts the shape out of an ordinary box, so it can carry a gradient or an image. The ::after version is a border triangle drawn by a pseudo-element, so a tooltip or a menu gets its arrow without an extra element in the HTML. SVG is best when the triangle is an icon that has to scale.
How do I add an arrow to a tooltip?
Pick Tooltip arrow and choose which way it points. The code gives the tooltip position: relative and draws the arrow with ::after, positioned just outside the side it points out of: top: 100% for an arrow under the tooltip, then centred along that side, or 16px in from the start or end. The arrow takes the tooltip's own colour, so the two always match. Untick the tooltip's own styles if you only want the arrow.
How do I make a triangle point to a corner?
Pick one of the four corner buttons on the direction grid. A corner triangle is right-angled: it fills the corner it names, using two borders instead of three. It's the shape used for folded corners, ribbons and the tail of a speech bubble.
How do I make an equilateral triangle?
Choose Equilateral. All three sides of an equilateral triangle are equal, so its height is always 0.866 times its width. The generator works the height out from the width (or the width from the height when the triangle points sideways) and locks that field. Corner directions can't be equilateral, because they are always right-angled.
Can I make a triangle that isn't symmetrical?
Yes. Pick Just a triangle, then switch to Free-form or just drag any corner, and put A, B and C wherever you like. clip-path and SVG copy the three points directly. The border version uses the longest side as the base, sets the border widths from where the tip sits above it, and rotates the result into place with a transform. Free-form is only for plain triangles: an arrow on a tooltip, caret, bubble, play button or step needs a side to sit on, so those use the direction grid.
What colours can I type?
Hex codes with 3, 4, 6 or 8 digits, rgb() and rgba(), hsl() and hsla(), all 148 CSS colour names such as teal or rebeccapurple, and any other colour your browser understands, such as oklch() or lab(). The code uses the colour exactly as you typed it, and transparency is kept. If what you type isn't a colour, the box says why, for example which character isn't a hex digit, and the code keeps using the last good colour until it's fixed. var() and currentColor can't be previewed, so they aren't accepted.
Can I use it without a mouse?
Yes. Every control is reachable with Tab. In the direction grid the arrow keys move between directions, and each free-form corner can be focused and moved with the arrow keys: 1px at a time, or 10px with Shift. Ctrl+Z and Ctrl+Shift+Z undo and redo while you're in the tool.
Why is my border triangle a pixel off?
Some browsers round border widths to whole device pixels, and free-form triangles often need fractional widths. The difference is at most a pixel, but if you need the exact shape, copy the clip-path or SVG version instead: they aren't rounded.
How does the share link work?
The settings are written into the part of the address after the #, which browsers never send to a server. Opening the link rebuilds the same triangle, colour and output. Nothing is stored anywhere except in the link itself.
Is my design uploaded anywhere?
No. The triangle is drawn by your browser and the code is written inside this page. Nothing is sent to a server, logged or stored.