CSS Triangle Generator

What Is the CSS Triangle Generator?

This tool generates a pure-CSS triangle using the classic "border trick": a zero-width, zero-height element with one solid border side and two transparent sides, which browsers render as a triangle. No image or SVG file needed.

How to Use This Tool

Set a size, color, and direction (up, down, left, or right). The preview and generated CSS update instantly.

How the Border Trick Works

Practical Uses

• Building a dropdown menu's pointer/caret without an image asset
• Creating a speech-bubble tail
• Adding a decorative triangular shape without extra HTTP requests

For rounded shapes instead, see the Border Radius Generator.

What the Generated CSS Contains

The tool outputs a block with width: 0; and height: 0; followed by three border lines. For the default settings (size 40, color #1565C0, direction up), the block is: border-left 40px solid transparent, border-right 40px solid transparent and border-bottom 40px solid #1565C0. Notice what the size number really means: it is used as the width of each side border and the thickness of the colored border, not the width of the whole triangle.

Worked Example: Sizing

With a size of 40 and direction up, the two transparent side borders are 40 pixels each, so the triangle's full base is 80 pixels wide, and its height is 40 pixels. The result is a triangle twice as wide as it is tall, with the point centered at the top. The same holds for the down direction. For left and right, the roles are swapped: the top and bottom borders are transparent and the colored border is on the right (for left) or left (for right), so the triangle is 40 pixels wide and 80 pixels tall. Knowing this helps you plan space: if a dropdown caret needs to sit in a 20 pixel tall row, a size of 10 gives a 20 pixel wide, 10 pixel tall pointer.

Using It as a Speech Bubble Tail or Dropdown Caret

• Create an empty element, such as a span or a pseudo-element like ::after, and apply the generated rules to it.
• Position the triangle absolutely against the edge of its parent, then set the parent to position relative so it anchors correctly.
• For a tail that points down from the bottom of a bubble, use the down direction and place the triangle just below the bubble edge, centered or offset left or right.
• Match the triangle color to the bubble background. A hover color change needs a matching rule that updates the border color too.

Limitations to Plan For

• You cannot add a border or a drop shadow to the triangle's outline with this method. A border on the triangle element would just change the shape. If you need an outlined pointer, layer two triangles of slightly different sizes and colors, or use SVG or clip-path.
• The shape is always isosceles with a 2:1 ratio here. Different proportions require hand-editing the border widths independently.
• The triangle is a transparent-bordered element, so its layout box is still set by the borders. Clicks near the transparent portions may still hit the element, depending on the layout.
• Very small sizes may look slightly jagged on some displays because the diagonal edges are drawn at pixel level.

Making It Responsive

Pixel sizes are fixed. If your design scales with text, you can change the pixel numbers in the output to em values, so that the triangle grows and shrinks with the font size of its container. That is convenient for carets next to labels of different sizes.

Frequently Asked Questions