Skip to tool

CSS Triangle Generator

CSS Triangle Generator tool on AzWebTools.

Result

Fill inputs and click run.

How to Use This Tool

  1. Select the direction your triangle should point (e.g., top, bottom, left, right, or diagonal).
  2. Enter the desired dimensions for the triangle's width and height in pixels.
  3. Choose the color of the triangle using the color picker or hex input field.
  4. Copy the generated CSS snippet from the output area.
  5. Paste the code into your project's stylesheet and apply the class to an HTML element or pseudo-element (::before / ::after).

Learn More About CSS Triangle Generator

The Magic Behind CSS Triangles

Creating triangles in CSS without SVGs or background images relies on a technique known as the "CSS border hack." Because web browsers render CSS borders with angled intersections, developers can manipulate these angles to draw geometric shapes.

When an HTML element has a width and height of zero, its borders collapse inward, meeting at exact center points. By making three of the borders transparent and applying a visible color to the fourth, a perfect triangle is formed.

Why Use CSS Triangles?

  • Performance: They require zero HTTP requests, unlike PNG or JPG images, keeping page load times minimal.
  • Scalability: They can be resized directly via CSS without losing quality or rendering pixelated.
  • Ease of Styling: Colors can be changed dynamically using CSS variables, hover states, or JavaScript without swapping out image assets.

Understanding the Code Structure

A typical CSS triangle pointing upwards requires a solid bottom border, while the left and right borders are set to transparent. The height of the triangle is controlled by the bottom border's width, and the overall width of the triangle is determined by the sum of the left and right border widths.

The Origin of the CSS Border Hack

The technique of using CSS borders to draw triangles was discovered during the era of table-less web design. Developers sought creative ways to build clean, pure-CSS user interfaces without relying on slow-loading background images. Because CSS borders intersect at 45-degree angles, developers realized that reducing an element's dimensions to zero left only these angled borders visible, allowing them to create perfect triangles by making specific borders transparent.
CSS triangles utilize zero-dimension elements combined with strategically colored and transparent borders to form geometric shapes.
Technique Name
CSS Border Hack
Primary Use
Tooltips & Pointers

Examples

Upward Equilateral (100x100)

Runtime-verified example for css-triangle-generator
Input
{"direction":"top","width":100,"height":100,"color":"#3b82f6"}
Output
{
  "direction": "top",
  "width": 100,
  "height": 100,
  "color": "#3b82f6"
}

Right Arrow (50x100)

Runtime-verified example for css-triangle-generator
Input
{"direction":"right","width":50,"height":100,"color":"#10b981"}
Output
{
  "direction": "right",
  "width": 50,
  "height": 100,
  "color": "#10b981"
}

Top-Right Corner (100x100)

Runtime-verified example for css-triangle-generator
Input
{"direction":"top-right","width":100,"height":100,"color":"#f59e0b"}
Output
{
  "direction": "top-right",
  "width": 100,
  "height": 100,
  "color": "#f59e0b"
}

Use Cases

  • Tooltip directional arrows
  • Chat bubble pointer tails
  • Dropdown menu indicators
  • Breadcrumb navigation dividers
  • Custom pure-CSS UI elements

Frequently Asked Questions

Related Tools