Triangle Generator

A simple form to generate CSS triangles (using border hacks) by selecting direction, color, and size.

CSS Code

Features

  • Pure CSS Triangles: Generates triangles using the transparent border trick.
  • Directional Control: Supports 8 different orientations.
  • Size & Color: Fully customizable dimensions and fill color.
  • Efficient CSS: Zero images, just minimal CSS code.

How to Use

  1. Choose the direction your triangle should point.
  2. Select the type (Equilateral or Isosceles) if applicable.
  3. Input the desired Width and Height.
  4. Pick a color.
  5. Copy the CSS code snippet.