CSS Triangle & Polygon Generator
Generate pure CSS triangles using zero-box border miters and modern CSS clip-path polygons with draggable control vertices, Tailwind classes, and SCSS mixins.
Border Triangle Controls
Zero-Box HackVisual Preview Stage
.css-triangle {
width: 0;
height: 0;
border-style: solid;
border-width: 0 50px 100px 50px;
border-color: transparent transparent #4f46e5 transparent;
}The Mechanics of Pure CSS Triangles & Polygon Geometry
Rendering geometric shapes in native CSS without rasterized image assets or SVG overhead relies on two distinct rendering models: the classic zero-dimension border-miter hack and modern CSS3 clip-path: polygon() vectors. Understanding how web layout engines rasterize these shapes allows frontend engineers to pick the optimal technique for UI performance and design fidelity.
The CSS Border-Miter Method
When an HTML element has a content box of width: 0 and height: 0, its borders meet diagonally at 45-degree angles. By making three borders transparent and assigning a color to the fourth, the browser draws a sharp triangle.
CSS3 Clip-Path Polygon Vectors
Modern browsers allow masking containers into arbitrary $N$-sided polygons using normalized coordinate pairs $(X_n\%, Y_n\%)$. This unlocks complex geometric silhouettes, linear gradients, and full responsive container scaling.
CSS Border Hack vs. CSS Clip-Path: Architectural Comparison
Selecting between border triangles and clip-path polygons depends on legacy browser constraints, gradient styling needs, and whether the shape acts as a layout container or an ornamental pointer:
| Feature & Capability | CSS Border Method | CSS clip-path Polygon |
|---|---|---|
| Browser Compatibility | Universal (IE6+, All Modern) | Modern (Chrome, Edge, Safari, Firefox) |
| Complex Geometries (>3 Vertices) | Limited to Triangles & Trapezoids | Unlimited ($N$-Sided Polygons, Stars) |
| Gradients & Background Images | No (Solid Colors Only) | Full Support (Linear, Radial, Images) |
| Inner Content / Child Elements | Impossible (0px Box Model) | Yes (Children clipped within boundary) |
| Tooltip Pseudo-Element Integration | Extremely Lightweight (::after) | Requires Sized Pseudo Box |
| GPU Animation Interpolation | Layout Reflow Triggered | Hardware Accelerated Transform/Morph |
Trigonometric Formulas for Equilateral and Scalene Triangles
To construct an exact equilateral triangle (three 60° internal angles), standard $1:1$ pixel dimensions cannot be used because the altitude $h$ is proportional to the side length $s$ through the Pythagorean theorem:
Equilateral Altitude Derivation
Production Recipes: Tooltip Pointers, Dropdowns & UI Badges
Implement these production-tested patterns for UI tooltips, speech bubbles, and responsive ribbons:
.tooltip-container {
position: relative;
}
.tooltip-container::after {
content: "";
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #1e293b;
}<div class="relative w-48 h-12 bg-indigo-600 text-white flex items-center justify-center font-bold [clip-path:polygon(0%_0%,100%_0%,85%_50%,100%_100%,0%_100%)]"> Special Sale </div>
Frequently Asked Questions (FAQ)
How do pure CSS border triangles actually work?
CSS border triangles leverage the mitered (diagonal) junction where adjacent borders meet on a box with 0px width and 0px height. By setting three borders to transparent and giving one border a non-zero width and solid color, a sharp geometric triangle is rendered entirely through hardware rasterization without external images or SVG elements.
When should I use CSS clip-path over the CSS border hack?
Use CSS clip-path when you need complex n-sided polygons (stars, hexagons, trapezoids), multi-color linear or radial gradients, responsive percentage scaling, or inner content (such as text and icons). Use the CSS border method when targeting legacy browsers or styling lightweight tooltip arrows and dropdown pointers via ::before or ::after pseudo-elements.
How do you make an equilateral triangle with CSS borders?
An equilateral triangle has three 60-degree interior angles and three equal sides. For a base width of W, the height must mathematically equal (sqrt(3)/2) * W (approximately 0.866025 * W). In CSS borders, for an upward triangle, set border-left and border-right to (W / 2)px transparent, and border-bottom to (W * 0.866)px solid color.
Can I attach these CSS triangles to tooltips with pseudo-elements?
Yes. Toggle the "Use ::after / ::before" mode in our tool to generate standard pseudo-element CSS. The parent element receives position: relative, while the ::after pseudo-element is configured with content: "", position: absolute, and the calculated border widths.
Are CSS clip-path shapes GPU accelerated?
Yes. Modern web browsers process CSS clip-path polygon coordinates on the GPU rasterizer pipeline. When animated with CSS transitions or keyframes, polygons render at a smooth 60–120 FPS, provided that the number of polygon vertices remains constant between keyframes.
Related & Complementary Utilities
Explore more privacy-first client-side web tools.
JSON to CSV & CSV to JSON Converter
Convert JSON to CSV and CSV to JSON instantly with custom delimiters, nested object flattening, real-time reactive conversion, dynamic size metrics tracking, and drag-and-drop file ingestion — 100% client-side.
HTML & CSS Minifier & Unminifier
Minify, unminify, compress, and beautify HTML markup and CSS stylesheets instantly with pure TypeScript tokenization engines — 100% client-side, zero external dependencies.
JavaScript Formatter, Beautifier & Minifier
Format, beautify, and minify JavaScript code instantly with a pure TypeScript lexical tokenization engine — 100% client-side, zero external dependencies.