CSS Triangle Generator - Create CSS Triangles with Border Trick Online
Generate CSS triangles using the border trick and clip-path polygon with live preview. 8 directions, 3 triangle types, multiple output formats — 100% client-side, no data sent to server.
Frequently Asked Questions
What is a CSS triangle and how does it work?
A CSS triangle is a triangle shape created purely with CSS, without images or SVGs. The most common technique uses the "border trick": when an element has zero width and height, its borders meet at diagonal seams. By making three of the four borders transparent and coloring one, the visible border forms a triangle shape. This technique has been a fundamental CSS trick since the early days of CSS2.
How do I use this CSS triangle generator?
1. Select the triangle direction using the direction pad (up, down, left, right, or diagonal corners). 2. Choose a triangle type: equilateral (all sides equal), isosceles (two sides equal), or scalene (all sides different). 3. Adjust the width and height using the sliders or numeric inputs. 4. Pick a color using the color picker or enter a hex value. 5. See the triangle update in real-time in the preview area. 6. Copy the generated CSS code with one click and paste it into your stylesheet.
Is my data secure? Does anything get sent to a server?
Yes, your data is completely secure. This tool runs entirely in your browser using client-side JavaScript. No configuration data, colors, or generated CSS is sent to any server. All processing happens locally on your device.
What is the difference between border trick and clip-path methods?
The border trick is the classic approach: it creates a zero-width, zero-height element and uses border widths and colors to form the triangle. It has excellent browser support (even IE6), but the element has no actual area, so you cannot apply box-shadow, background-image, or use the element as a container. The clip-path method uses clip-path: polygon() to clip a normal element into a triangle shape. This allows backgrounds, gradients, shadows, and the element retains its dimensions, but requires modern browser support.
When should I use CSS triangles?
CSS triangles are commonly used for: tooltip arrows and callout pointers, dropdown menu indicators, breadcrumb navigation separators, accordion expand/collapse indicators, speech bubble tails, decorative section dividers, and step/progress indicators. They are lightweight (no image downloads), scale perfectly at any resolution, and can be colored dynamically with CSS custom properties.
Why can I not add a box-shadow to my CSS triangle?
Border-trick triangles are zero-width, zero-height elements. The box-shadow property applies to the element's box, which has no area. To create a triangle with a shadow, use the clip-path method instead, which creates a triangle from a normal-sized element that retains its box model. Alternatively, you can use the filter: drop-shadow() property, which follows the visual outline of the element including its borders.
What are equilateral, isosceles, and scalene triangles?
Equilateral triangles have all three sides equal in length and all angles equal to 60 degrees. The height is mathematically determined as width × √3 / 2. Isosceles triangles have two sides of equal length with a third different side, making them symmetric. This is the most common type for CSS triangles (e.g., centered arrows). Scalene triangles have all three sides of different lengths, useful for creating asymmetric or skewed arrow shapes.
Code Examples
// CSS Triangle Generator - JavaScript Implementation
// Generate CSS triangle using the border trick
function generateTriangleCSS(direction, width, height, color) {
const styles = { width: '0', height: '0' };
const halfWidth = width / 2;
const halfHeight = height / 2;
switch (direction) {
case 'up':
styles['border-left'] = `${halfWidth}px solid transparent`;
styles['border-right'] = `${halfWidth}px solid transparent`;
styles['border-bottom'] = `${height}px solid ${color}`;
break;
case 'down':
styles['border-left'] = `${halfWidth}px solid transparent`;
styles['border-right'] = `${halfWidth}px solid transparent`;
styles['border-top'] = `${height}px solid ${color}`;
break;
case 'left':
styles['border-top'] = `${halfHeight}px solid transparent`;
styles['border-bottom'] = `${halfHeight}px solid transparent`;
styles['border-right'] = `${width}px solid ${color}`;
break;
case 'right':
styles['border-top'] = `${halfHeight}px solid transparent`;
styles['border-bottom'] = `${halfHeight}px solid transparent`;
styles['border-left'] = `${width}px solid ${color}`;
break;
}
return Object.entries(styles)
.map(([prop, value]) => `${prop}: ${value};`)
.join('\n');
}
// Generate clip-path polygon
function generateClipPath(direction, width, height, color) {
const points = {
up: '50% 0%, 100% 100%, 0% 100%',
down: '0% 0%, 100% 0%, 50% 100%',
left: '100% 0%, 100% 100%, 0% 50%',
right: '0% 0%, 100% 50%, 0% 100%',
};
return `width: ${width}px;\nheight: ${height}px;\nbackground: ${color};\nclip-path: polygon(${points[direction]});`;
}
console.log(generateTriangleCSS('up', 100, 87, '#3B82F6'));
// width: 0; height: 0;
// border-left: 50px solid transparent;
// border-right: 50px solid transparent;
// border-bottom: 87px solid #3B82F6;