Triangle Generator
Generate pure CSS triangles in all 8 directions with border or clip-path.
Free & unlimited
Method
Direction
Current: Up
100px
80px
Quick sizes
Tip: The border method is widely supported but creates triangles with zero dimensions. The clip-path method creates real elements you can add content to. Use clip-path for modern browsers and border for maximum compatibility.
.triangle {
width: 0;
height: 0;
border-style: solid;
border-width: 0 50px 80px 50px;
border-color: transparent transparent #3B82F6 transparent;
}All processing happens in your browser. No data is sent to any server.
About this tool
- 1
Pick a direction
Select which way the triangle should point: up, down, left, right, or diagonal.
- 2
Set dimensions
Adjust the width and height of the triangle using sliders or numeric input.
- 3
Choose a color
Set the fill color of the triangle to match your design.
- 4
Copy the CSS
Get the border-based CSS trick that creates the triangle shape with zero-width/height elements.
- CSS triangles work by exploiting how borders meet at an element with zero width and height.
- For equilateral triangles, set the side borders to about 57.7% of the base border width (1/sqrt(3)).
- Add a second triangle slightly larger and in a darker color behind the first to simulate a bordered triangle.
- Use CSS custom properties (variables) for the color so triangles adapt to theme changes.
- Eight directional presets including diagonals
- Adjustable width and height independently
- Color picker for triangle fill
- Both border-trick and clip-path output options
- Build tooltip arrows and popover pointers.
- Create dropdown caret indicators for navigation menus.
- Design breadcrumb separators with directional arrows.
- Add decorative triangle accents to section dividers.
When an element has zero width and height, its borders form four triangles meeting at the center. By making three borders transparent and one colored, only one triangle is visible.
The border trick has universal support and is great for small UI elements like arrows. Clip-path is more flexible for complex shapes but has slightly narrower browser support.
Not directly with the border trick. The common workaround is to layer two triangles - a larger background one for the border color and a smaller foreground one for the fill.