CSS Triangle Generator

Create CSS triangles using borders and customize their direction, size and color.

Direction

Size80px

Color

.triangle {
  width: 0;
  height: 0;
  border-left: 80px solid transparent;
  border-right: 80px solid transparent;
  border-bottom: 80px solid #3b82f6;
}

What is CSS Triangle Generator?

Generate pure CSS triangles without images or SVG by configuring direction, size and colors.

How to use

Choose the triangle direction.
Set the triangle dimensions and color.
Preview the generated triangle.
Copy the CSS code.

Features

Pure CSS triangles
Multiple directions
Customizable size
Custom colors
Live preview

Common Use Cases

UI components
Dropdown arrows
Tooltips
CSS decorations
Navigation elements

Example

Input

Direction: Up
Size: 40px
Color: #3498db

Output

.triangle {
  width: 0;
  height: 0;
  border-left: 40px solid transparent;
  border-right: 40px solid transparent;
  border-bottom: 40px solid #3498db;
}