CSSKit

CSS Triangle Generator | Pure CSS Triangles - CSSKit

Free CSS triangle generator. Create triangles pointing in any direction using the CSS border trick. Customize size, color, and direction with live preview.

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

What is CSS Triangle Generator?

CSS Triangle Generator is a free online tool for creating pure CSS triangles using the border trick. Point triangles in any direction, customize size and color, and get clean CSS code with no images or SVGs needed.

How to Use CSS Triangle Generator

Select the triangle direction (up, down, left, right, or diagonal). Set the triangle width and height using the sliders. Pick the triangle color using the color picker. See the triangle rendered in the live preview. Copy the generated CSS code that uses the border trick.

How CSS Triangle Generator Works

The tool uses the CSS border trick to create triangles. By setting an element to zero width and height and making three borders transparent while giving one border a color and size, a triangle shape is formed. The direction of the visible border determines which way the triangle points.

Common Use Cases

  • Creating tooltip arrows and pointers
  • Building dropdown menu indicators
  • Adding directional arrows to navigation
  • Creating breadcrumb separators
  • Building CSS-only accordion indicators

Frequently Asked Questions

How does the CSS border triangle trick work?▼

When you set width and height to 0 and add thick borders, the borders meet at diagonal lines. By making three borders transparent and one colored, you see a triangle shape formed by the remaining colored border.

Can I create equilateral triangles?▼

Yes, set equal width and height values to create equilateral triangles. You can also create isosceles or scalene triangles by using different width and height values.

What directions can the triangle point?▼

The tool supports 8 directions: up, down, left, right, and the four diagonals (top-left, top-right, bottom-left, bottom-right).

Is the border trick better than using clip-path?▼

The border trick has wider browser support and works in all browsers. clip-path offers more shape flexibility but the border trick is simpler for basic triangles and is a classic CSS technique.

Related Tools

CSS Shape Generator

Free CSS shape generator. Create triangles, circles, stars, hearts, arrows and m...

CSS Clip Path Generator

Free CSS clip-path generator. Create circles, ellipses, polygons, and inset clip...

CSS Border Generator

Free CSS border generator. Create borders with custom width, style, color, and b...

CSS Animation Generator

Free CSS animation generator. Create keyframe animations with visual controls fo...