CSS Triangle Generator

What does the CSS Triangle Generator do?

The CSS Triangle Generator creates pure CSS directional arrows and geometric triangles for tooltips, speech bubbles, dropdown menus, and navigational indicators. It features 8 direction orientations (Top, Right, Bottom, Left, Top-Left, Top-Right, Bottom-Left, Bottom-Right), custom width/height dimension sliders, live shape rendering, and instant zero-click auto-conversion to both the classic zero-size border trick and modern CSS clip-path: polygon(...) declarations.

Core Concepts

Understanding the two CSS triangle techniques:

• Transparent Border Trick: An element with width: 0 and height: 0 generates diagonal miter joints when adjacent borders have different colors. Setting 3 sides to transparent and 1 side to a solid color renders a crisp vector triangle compatible with all browsers down to IE6.
• Modern clip-path: polygon(...): Modern CSS polygon clipping clips standard rectangular boxes (width: 50px; height: 50px;) into precise angular triangles, which supports standard background colors, linear gradients, and box shadows.
• Tooltip Pseudo-Elements: Positioning triangles absolutely on ::after or ::before pseudo-elements allows seamless popover arrow attachments without adding extra HTML DOM nodes.

How to use the tool?

1. Select Direction: Click any of the 8 direction buttons (Top, Right, Bottom, Left, etc.).
2. Adjust Dimensions & Color: Scale the width and height sliders or pick your theme color.
3. Copy Code: Grab the border hack or clip-path declaration with a single click.

Related Developer Utilities

If you work with CSS design tokens, web styling, and UI components, explore these complementary tools:

• CSS Border Radius Generator: Create 4-corner curves and 8-value organic blob shapes.
• CSS Box Shadow Generator: Generate multi-layer elevation box shadows and Tailwind classes.
• CSS Gradient Generator: Generate multi-stop linear and radial CSS gradients and SVG tags.
• HEX to RGB & HSL Converter: Convert hexadecimal color codes into RGB, HSL, and CMYK formats.

REST API Integration

Blueutils provides a free REST API endpoint (POST https://blueutils.com/api/css/triangle-generator) to programmatically calculate CSS border dimensions, clip-path polygons, and tooltip pseudo-element snippets.

API Request Parameters

API Request Payload Examples

cURL

curl -X POST https://blueutils.com/api/css/triangle-generator \
  -H "Content-Type: application/json" \
  -d '{
    "direction": "top",
    "width": 40,
    "height": 40,
    "color": "#3b82f6"
  }'

Python

import requests

url = "https://blueutils.com/api/css/triangle-generator"
payload = {
    "direction": "top",
    "width": 40,
    "height": 40,
    "color": "#3b82f6"
}
headers = {"Content-Type": "application/json"}
response = requests.post(url, json=payload, headers=headers)
print(response.json())

Java

import java.net.URI;
import java.net.http.HttpClient;
import java.net.http.HttpRequest;
import java.net.http.HttpResponse;

public class Main {
    public static void main(String[] args) throws Exception {
        String jsonPayload = """
            {
                "direction": "top",
                "width": 40,
                "height": 40,
                "color": "#3b82f6"
            }
            """;

        HttpClient client = HttpClient.newHttpClient();
        HttpRequest request = HttpRequest.newBuilder()
            .uri(URI.create("https://blueutils.com/api/css/triangle-generator"))
            .header("Content-Type", "application/json")
            .POST(HttpRequest.BodyPublishers.ofString(jsonPayload))
            .build();

        HttpResponse<String> response = client.send(request, HttpResponse.BodyHandlers.ofString());
        System.out.println(response.body());
    }
}

API Response Parameters

API Response Payload Examples

Success Response (HTTP 200 OK)

{
  "isValid": true,
  "direction": "top",
  "width": 40,
  "height": 40,
  "color": "#3b82f6",
  "borderTriangle": {
    "borderWidth": "0 20px 40px 20px",
    "borderColor": "transparent transparent #3b82f6 transparent",
    "cssDeclaration": "width: 0;\nheight: 0;\nborder-style: solid;\nborder-width: 0 20px 40px 20px;\nborder-color: transparent transparent #3b82f6 transparent;"
  },
  "clipPathTriangle": {
    "polygon": "polygon(50% 0%, 0% 100%, 100% 100%)",
    "cssDeclaration": "width: 40px;\nheight: 40px;\nbackground-color: #3b82f6;\nclip-path: polygon(50% 0%, 0% 100%, 100% 100%);"
  },
  "tooltipSnippet": ".tooltip::after {\n  content: \"\";\n  position: absolute;\n  width: 0;\n  height: 0;\n  border-style: solid;\n  border-width: 0 20px 40px 20px;\n  border-color: transparent transparent #3b82f6 transparent;\n}"
}

Validation Failure Response (HTTP 400 Bad Request)

{
  "isValid": false,
  "error": "Invalid triangle configuration: direction or dimensions missing."
}

Rate Limit Exceeded Response (HTTP 429 Too Many Requests)

{
  "error": "API rate limit exceeded. Please wait or contact support@blueutils.com."
}

Why use an API to generate CSS Triangles?

Integrating the Triangle API into headless UI libraries, component design systems, or AI agents provides key benefits:

• Automated Tooltip Arrow Calculations: Generates mathematically exact border widths and positioning offsets for popover tails during component build steps.
• AI Agent Styling & UI Generation: Enables AI frontend agents to construct zero-dimension border hacks or clip-path polygon vectors dynamically without manual trigonometry.
• Consistent Directional Indicators: Ensures accordion carats, speech bubble tails, and badge ribbons maintain exact aspect ratios across design tokens.

Native Usage

How to compute CSS triangle border rules programmatically across programming environments:

Node.js (JavaScript)

// Calculate CSS border-triangle rules in Node.js
function getCssTriangle(dir, w, h, color) {
  let bw = '', bc = '';
  if (dir === 'top') {
    bw = `0 ${w / 2}px ${h}px ${w / 2}px`;
    bc = `transparent transparent ${color} transparent`;
  } else if (dir === 'bottom') {
    bw = `${h}px ${w / 2}px 0 ${w / 2}px`;
    bc = `${color} transparent transparent transparent`;
  }
  return `width: 0;\nheight: 0;\nborder-style: solid;\nborder-width: ${bw};\nborder-color: ${bc};`;
}

console.log(getCssTriangle('top', 40, 40, '#3b82f6'));

Windows (PowerShell Script)

# Programmatically calculate CSS border triangle
$w = 40; $h = 40; $color = "#3b82f6"
$halfW = $w / 2
$css = "width: 0; height: 0; border-style: solid; border-width: 0 ${halfW}px ${h}px ${halfW}px; border-color: transparent transparent $color transparent;"
Write-Host $css

Python

def create_css_triangle(direction, width, height, color="#3b82f6"):
    half_w = width / 2
    if direction == "top":
        bw = f"0 {half_w}px {height}px {half_w}px"
        bc = f"transparent transparent {color} transparent"
    return f"width: 0;\nheight: 0;\nborder-style: solid;\nborder-width: {bw};\nborder-color: {bc};"

print(create_css_triangle("top", 40, 40))

Java

public class TriangleGenerator {
    public static String createTriangle(String dir, int w, int h, String color) {
        int halfW = w / 2;
        String bw = "0 " + halfW + "px " + h + "px " + halfW + "px";
        String bc = "transparent transparent " + color + " transparent";
        return "width: 0;\nheight: 0;\nborder-style: solid;\nborder-width: " + bw + ";\nborder-color: " + bc + ";";
    }

    public static void main(String[] args) {
        System.out.println(createTriangle("top", 40, 40, "#3b82f6"));
    }
}