Easy24Easy24
PDFImageVideoTextConvertGenerateCalculateDeveloperSecurityTime

CSS Triangle

Generate CSS border triangles pointing up, down, left, or right. Presets, color picker, live preview, copy or download.

PrivateIn your browserInstantUnlimited

Approx. bounding box: 64px × 32px

Classic zero-width, zero-height box with transparent borders and one colored side.

How it works

1

Pick direction

Choose up, down, left, or right. Each direction colors a different border side.

2

Set size and color

Border size controls triangle height or width. Use the picker or hex input for color.

3

Copy CSS

Preview the shape, then copy or download triangle.css for tooltips, carets, and arrows.

Why use CSS border triangles?

Before clip-path was widely supported, border triangles were the lightweight way to add carets and arrows without images.

Why use this tool

  • Four cardinal directions
  • Live border-triangle preview
  • Five quick presets
  • Hex color input
  • Bounding box dimensions
  • Unlimited use — no daily cap

Questions

What does CSS Triangle do?

It outputs CSS for a triangle using the zero-size element with colored borders technique.

Why width and height zero?

Only border widths render visible area. Transparent borders form the sloped sides.

Can I make rounded triangles?

Not with the border trick. Use clip-path or SVG for rounded or complex shapes.

What does border size mean?

It is the width of each border side in pixels — for an up triangle, bottom border sets height.

Is my CSS sent to a server?

No. Generation runs entirely in this browser tab.

Is there a daily limit?

No. This generator is unlimited on the free plan.

If Easy24 helped, buy a coffee

Tools stay free in your browser. One-time thanks via Kreosus. Turkish cards work.

Buy a coffee

Similar Developer tools

See all

JSON Formatter

Developer

Pretty-print, minify, validate, and sort JSON keys in the browser. Choose 2- or 4-space indent, import a file, download the result.

Open

Meta Tag Generator

Developer

Build SEO title, description, Open Graph, Twitter Card, and canonical tags with a live social preview. Runs in the browser.

Open

CSS Gradient Generator

Developer

Design linear and radial CSS gradients with up to three color stops. Live preview, presets, hex input, copy or download.

Open