{"id":187,"date":"2026-05-05T09:18:00","date_gmt":"2026-05-05T13:18:00","guid":{"rendered":"https:\/\/simpletool.io\/blog\/?p=187"},"modified":"2026-05-05T09:18:00","modified_gmt":"2026-05-05T13:18:00","slug":"css-triangle","status":"publish","type":"post","link":"https:\/\/simpletool.io\/blog\/css-triangle\/","title":{"rendered":"CSS Triangle Generator: Border Trick + Clip-Path [2026]"},"content":{"rendered":"
TL;DR:<\/strong> CSS triangles use one of two techniques: the classic border trick<\/strong> (a zero-size element with thick transparent borders, where one border has a color \u2014 that color shows as a triangle) or modern clip-path<\/strong> with a polygon()<\/code>. Border trick has perfect browser support back to IE 6; clip-path is cleaner CSS but needs a real-sized box. Our free CSS triangle generator<\/a> outputs both forms with size, color, and direction controls.<\/div>\n

CSS triangles solve a specific problem: drawing a small triangular shape (tooltip arrows, dropdown indicators, breadcrumb separators, accent shapes) without an SVG or image. The two techniques have been around forever \u2014 the border-trick variant is famously hacky CSS that works because of how browsers render border miters at the corners of an element. The clip-path variant is straightforward but needs more recent browser support.<\/p>\n

Our CSS triangle generator<\/a> builds either form. Pick a direction (up, down, left, right, or one of four diagonals), set size and color, and copy the production CSS. Both versions are inline-able \u2014 no extra HTML elements needed beyond the triangle’s own div<\/code> or span<\/code>. This guide explains both techniques, when to use which, and the rendering quirks that make one or the other choice for specific contexts.<\/p>\n

Border trick vs clip-path \u2014 which to use<\/h2>\n\n\n\n\n\n\n
Technique<\/th>\nPros<\/th>\nCons<\/th>\n<\/tr>\n<\/thead>\n
Border trick<\/strong><\/td>\nUniversal browser support; zero-size element<\/td>\nHard to gradient-fill; smaller hit area<\/td>\n<\/tr>\n
clip-path polygon()<\/strong><\/td>\nCleaner CSS; can have content; gradient-fillable<\/td>\nModern only; needs real-size box<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

For tooltip arrows and dropdown indicators (decoration only): use the border trick. For triangular badges, decorative shapes, or any triangle that needs gradients, text inside, or animation: use clip-path.<\/p>\n

The border-trick technique explained<\/h2>\n

An element with width: 0; height: 0;<\/code> and thick borders renders as four diagonal-mitered triangles meeting at the centre. Make three of those borders transparent and you’re left with a single triangle in the colour of the visible border:<\/p>\n

\/* Triangle pointing up \u2014 30px wide, 20px tall *\/\r\n.triangle-up {\r\n  width: 0;\r\n  height: 0;\r\n  border-left: 15px solid transparent;\r\n  border-right: 15px solid transparent;\r\n  border-bottom: 20px solid #635BFF;\r\n}\r\n\r\n\/* Triangle pointing down *\/\r\n.triangle-down {\r\n  width: 0;\r\n  height: 0;\r\n  border-left: 15px solid transparent;\r\n  border-right: 15px solid transparent;\r\n  border-top: 20px solid #635BFF;\r\n}<\/code><\/pre>\n
The size is implicit: the triangle’s width is twice the border-left\/right width (30px above), and its height is whatever the visible border thickness is (20px). To change direction, change which border is solid and which are transparent.<\/p>\n
The clip-path technique explained<\/h2>\n
A real-sized div clipped to a polygon shape produces an editable, fill-able triangle:<\/p>\n
\/* Triangle pointing up *\/\r\n.triangle-up {\r\n  width: 60px;\r\n  height: 60px;\r\n  background: #635BFF;\r\n  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);\r\n}\r\n\r\n\/* Add gradient or border easily *\/\r\n.triangle-gradient {\r\n  width: 60px;\r\n  height: 60px;\r\n  background: linear-gradient(45deg, #635BFF, #00D4FF);\r\n  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);\r\n}<\/code><\/pre>\n
Bonus: clip-path triangles can have text inside (it’s a real div), can be flex\/grid containers, and can be animated. The cost is needing modern browser support (Chrome 23+, Firefox 54+, Safari 7+ \u2014 universal in 2026 except IE).<\/p>\n
How to generate a CSS triangle<\/h2>\n
    \n
  1. Open the CSS triangle generator<\/a><\/li>\n
  2. Pick direction (up, down, left, right, top-left\/top-right\/bottom-left\/bottom-right diagonals)<\/li>\n
  3. Set width and height<\/li>\n
  4. Pick color, plus a stroke for the clip-path version<\/li>\n
  5. Toggle between Border trick<\/strong> and clip-path<\/strong> output<\/li>\n
  6. Click Copy CSS<\/strong><\/li>\n<\/ol>\n
    When you’d use a triangle in real CSS<\/h2>\n