Using the CSS Triangle Generator

This simple tool generates the CSS code for a pure CSS triangle. This is a classic CSS technique that avoids the need for images when creating simple pointer shapes.

1. Select a Direction. Click the buttons to choose which way the triangle should point.
2. Adjust the Size. Use the slider to control the size of the triangle.
3. Pick a Color. Use the color picker to set the triangle's color.
4. Copy the CSS. The generated code is ready to be used on any element in your project.

The CSS Border Trick Explained

CSS triangles are not a real shape but a clever illusion created using the border property. The technique works by creating a zero-width and zero-height element and giving it thick borders.

When an element's borders meet, they form a diagonal line. If you give an element four thick borders of different colors, you will see how they meet in the middle to form four triangular shapes.

.box {
  width: 0;
  height: 0;
  border-top: 50px solid red;
  border-right: 50px solid blue;
  border-bottom: 50px solid green;
  border-left: 50px solid yellow;
}

To create a single triangle, we simply make three of the borders transparent. The remaining visible border is the triangle you see. For example, to create an upward-pointing triangle, you would give it a colored bottom border and transparent left and right borders.

Common Use Cases

This technique is lightweight and has excellent browser support, making it a reliable choice for small but common UI elements.

• Tooltips. The most common use is to create the small arrow that points from a tooltip box to the element it is describing.
• Dropdown Arrows. A small downward-pointing triangle is often used in custom <select> elements or dropdown menus to indicate that they are expandable.
• Breadcrumbs. Right-pointing triangles can be used as separators between links in a breadcrumb navigation trail.

A Modern Alternative: clip-path

For creating more complex shapes beyond a simple triangle, the modern CSS clip-path property is a more powerful and flexible option. It allows you to define a clipping region, such as a polygon with many points, to create any shape you can imagine.

However, for a standard, simple triangle, the border trick remains a popular and perfectly valid technique due to its simplicity and long-standing, universal browser support.