CSS Triangle Generator
Create CSS triangle shapes using the border technique.
width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid #3b82f6;
How to Use the CSS Triangle Generator
Choose a triangle direction (up, down, left, right or any diagonal), adjust the width and height sliders, and pick a color. The live preview updates instantly. When you're happy with the result, click "Copy CSS" to grab the generated border-based triangle code.
Frequently Asked Questions
How do CSS triangles work?
CSS triangles use the border trick: set width and height to 0, then make one border solid (the visible side) and the adjacent borders transparent. The browser renders the borders as angled shapes, creating a triangle.
Can I make a right-angled triangle?
Yes — use one of the diagonal directions (top-left, top-right, bottom-left, bottom-right) to create right-angled corner triangles.
How do I change the triangle size?
Use the width and height sliders. Width controls the base of the triangle and height controls the tip-to-base distance.
Are CSS triangles responsive?
Border-based triangles use fixed pixel values. For responsive triangles, consider using CSS clip-path with percentage values or viewport units.
More CSS & Design
Color Picker
Pick colors visually and get HEX, RGB, and HSL values.
Open tool →Gradient Generator
Create CSS linear and radial gradients with a visual editor.
Open tool →Color Palette Generator
Generate harmonious color palettes from a base color.
Open tool →Text Shadow Generator
Create CSS text shadows with a visual editor and presets.
Open tool →Box Shadow Generator
Create CSS box shadows with a visual editor.
Open tool →Border Radius Generator
Create CSS border-radius with a visual corner editor.
Open tool →