Super Boring Tools

Search tools

Find a tool by name or what it does.

CSS Triangle Generator

Build a pure CSS triangle in any direction with a live preview, then copy the exact code.

Preview
Direction
Size
Color
CSS
.triangle {
  width: 0;
  height: 0;
  border-left: 60px solid transparent;
  border-right: 60px solid transparent;
  border-bottom: 100px solid #3b82f6;
}

How to make a CSS triangle

  1. Pick a direction

    Choose which way the triangle points, up, down, left, right, or into one of the four corners. The preview and the CSS switch to match.

  2. Set the size

    Drag the width and height sliders to size the triangle. Width sets its horizontal extent and height its vertical extent, and the preview scales to stay in view.

  3. Choose a color

    Pick the fill color with the swatch or type a hex value, and the shape repaints as you go.

  4. Copy the CSS

    The declaration below the controls always matches the preview. Click Copy CSS to grab it.

Why use this tool

Eight directions including corners

Point the triangle up, down, left, or right, or make a right-angle triangle that fills any of the four corners, all from one control.

Live preview that scales to fit

The shape redraws on every change and shrinks to stay fully visible, so a 300 pixel triangle is as easy to judge as a tiny caret.

Independent width and height

Set the horizontal and vertical size separately for tall, wide, or equal-sided triangles, not just a single fixed size.

Clean, paste-ready CSS

Output is the classic zero width and height plus border declaration, with only the sides that matter, ready to drop into a stylesheet.

Any fill color

Choose a color with the picker or type a hex code, and the value flows straight into the border that forms the triangle.

Runs entirely in your browser

The shape and its CSS are built on your device; nothing is uploaded and there is no signup.

About this tool

This CSS triangle generator builds a triangle the way front-end developers have for years: an element with zero width and height and thick borders. Only one border gets a color while the neighboring borders stay transparent, and where they meet forms a crisp diagonal edge. Choose a direction, set the width and height, and pick a color, and the tool writes the exact border rule while showing the result live. The width controls how wide the shape is and the height controls how tall it is, so you are not locked into a single equilateral shape.

Triangles like these are everywhere in interfaces: dropdown carets, tooltip and speech-bubble tails, accordion arrows, ribbon corners, and simple decorative shapes. Because they are pure CSS with no image or extra markup, they stay sharp at any zoom and cost nothing to load. This tool covers the four cardinal directions plus right-angle triangles for each corner, which are the ones people usually reach for and get wrong. When you need the surrounding styling too, the box shadow generator and the CSS gradient generator pair well, and the color converter helps when your fill color starts as an RGB or HSL value.

Everything happens in your browser as you adjust the controls. Nothing is uploaded, there is no account, and the CSS exists only in your tab until you copy it.

Frequently asked questions

How does a CSS triangle work?
An element is given zero width and height and thick borders. One border is filled with a color and the borders on either side are set to transparent. Where those borders meet they form diagonal edges, and the single colored border becomes a triangle. This tool writes that rule for you and previews it live.
Can I make triangles that point in any direction?
Yes. Pick from up, down, left, and right for the four cardinal directions, plus top left, top right, bottom right, and bottom left for right-angle triangles that sit in a corner. Each direction produces its own border rule.
How do I change the size of the triangle?
Use the width and height sliders. Width sets the horizontal extent of the shape and height sets the vertical extent, and they work independently, so you can make a wide, flat triangle or a tall, narrow one. The preview scales down when needed so the whole shape stays visible.
What color formats can I use?
Use the color swatch to pick visually, or type a hex value like #3b82f6 or the short form #38f into the field next to it. The chosen color is written straight into the generated CSS.
Is my data uploaded anywhere?
No. Everything runs in your browser; nothing is sent to a server. The triangle is rendered and its CSS is generated locally, with no account and no upload.
Where would I use a CSS triangle?
Common uses include dropdown and select carets, tooltip and speech-bubble tails, accordion and menu arrows, ribbon corners, and small decorative shapes. Because it is pure CSS, it needs no image and stays crisp at any zoom.

Related tools