CSS Triangle Generator API

Generate CSS for a triangle pointing in any of eight directions, as the classic border trick and as clip-path, plus a tooltip arrow for straight directions.

POST /api/v1/tools/css-triangle-generatorMCP css_triangle_generatorDesign & Colour

Make pure CSS triangles and tooltip arrows in 8 directions. Set width, height and colour, preview live, and copy border-based CSS or a clip-path version.

Input

Send these as a JSON object. Unknown fields are rejected.

direction: Which way the triangle points. (string, one of up-left, up, up-right, left, right, down-left, down, down-right, default "up")
width: Width in px. (number, 1 to 1000, default 20)
height: Height in px. (number, 1 to 1000, default 20)
color: Fill colour (hex, rgb(), hsl() or a name). (string, up to 100 characters, default "#0f766e")

Try it in the browser JSON Schema Get an API key

curl https://pithlab.com/api/v1/tools/css-triangle-generator \n  -H "Authorization: Bearer $PITHLAB_KEY" \n  -H "Content-Type: application/json" \n  -d '{"direction":"down","width":24,"height":12,"color":"#0f766e"}'

Example response

{
  "ok": true,
  "result": {
    "borderCss": ".triangle {\n  width: 0;\n  height: 0;\n  border-top: 12px solid #0f766e;\n  border-right: 12px solid transparent;\n  border-left: 12px solid transparent;\n}",
    "clipPathCss": ".triangle {\n  width: 24px;\n  height: 12px;\n  background: #0f766e;\n  clip-path: polygon(0 0, 100% 0, 50% 100%);\n}",
    "tooltipCss": ".tooltip {\n  position: relative;\n  background: #0f766e;\n}\n.tooltip::after {\n  content: \"\";\n  position: absolute;\n  top: 100%;\n  left: 50%;\n  margin-left: -12px;\n  width: 0;\n  height: 0;\n  border-top: 12px solid #0f766e;\n  border-right: 12px solid transparent;\n  border-left: 12px solid transparent;\n}",
    "polygon": "0 0, 100% 0, 50% 100%",
    "color": "#0f766e"
  }
}