CSS Triangle Generator

Build a pure-CSS triangle (or arrow) shape with the classic border-trick and copy the code.

FreeBrowser-basedInstant
Direction
px

Your files are processed locally in your browser and are not uploaded to our servers. All generation happens instantly in your browser using plain JavaScript — nothing is sent to a server.

How to use CSS Triangle Generator

Pick a direction (up, down, left, right, or any of the four diagonal corners), adjust the size and color, and the live preview updates instantly using the classic zero-width/height border trick — no clip-path and no image file needed, so it works in every browser. Copy the exact CSS when it looks right. Everything runs locally in your browser.

Key features

  • Eight directions - four cardinal, four diagonal corners
  • Adjustable size and color
  • Live preview that updates instantly
  • Pure CSS - no clip-path or image file, works in every browser
  • One-click copy of the exact generated CSS

Practical use cases

  • Building a pointer arrow for a tooltip or dropdown menu
  • Creating a decorative triangle shape for a design element
  • Making a simple play-button triangle icon without an image asset
  • Adding a corner ribbon or badge triangle to a card

Supported formats

Accepted: css-triangle

Limitations

  • Produces an isosceles/equilateral-style triangle from the border trick, not an arbitrary custom triangle shape
  • For a custom asymmetric triangle, clip-path would be needed instead - not something this tool generates

Frequently asked questions

How does a CSS triangle work without clip-path or an image?
It uses the classic border trick - an element with zero width and height, and a large, transparent border on three sides with a solid color on the fourth. Where the colored border meets the transparent ones, it renders as a triangle. This works in every browser, even very old ones.
Can I point the triangle in any direction?
Yes - up, down, left, right, and the four diagonal corners are all supported, each adjusting which border side gets the solid color.
Can I use this as an arrow for a tooltip or dropdown?
Yes - a small triangle pointing toward the element it's attached to is exactly how most tooltip and dropdown "pointer" arrows are built in CSS.
Does the triangle scale responsively?
The size is set in a fixed pixel value you choose - for a responsive triangle, wrap the generated CSS in your own media query or use a CSS clamp() value on the border-width you copy out.

Part of CSS Tools