CSS Triangle Generator
Make a CSS triangle in any of 8 directions with the border trick or clip-path. Set width, height and colour and copy the code. Free and private.
CSS
.triangle {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 24px solid #5145e5;
}
HTML
<div class="triangle"></div>
Shortcuts: Ctrl+Enter run · Ctrl+Shift+C copy result · / search (use ⌘ on Mac)
Next steps
Done here? Use the Send to… menu on the result to carry it on to CSS Clip Path Generator.
Free CSS Triangle Generator
Make a triangle with plain CSS for a tooltip arrow, a dropdown caret or a corner ribbon. Choose the direction, the size and the method. It gives developers a quick browser-based way to solve a focused css triangle generator task before moving the result into a project.
How to use CSS Triangle Generator
Use the border method for the widest browser support. Use clip-path when you want a gradient or an image inside the triangle.
Common mistakes
- Giving the border triangle a background colour: use the border colour instead.
- Expecting clicks on the border triangle to be limited to the triangle: its box is rectangular.
Frequently asked questions
How does the border trick work?
An element with zero width and height and thick borders meets its borders at diagonal edges. Making three borders transparent leaves one triangle.
When should I use clip-path?
When the triangle needs a gradient, an image or a shadow-free crisp edge. clip-path also makes only the triangle clickable.
Can I add a border or shadow?
Not with the border method. Wrap the triangle in an element with filter: drop-shadow(...).
Is anything uploaded?
No. The code is built in your browser and nothing is sent to a server.
How do I use this css triangle generator tool?
Use the interactive controls above; processing stays in your browser and the result is intended as a practical starting point for development work.
More Frontend & Design
User-Agent ParserSee which browser and device a visitor usesSVG OptimizerMake SVG images smallerColor ConverterConvert colours between HEX, RGB and HSLColor Blindness SimulatorSee how colour-blind people see your designCSS Effects GeneratorCreate gradients and shadows visuallyMeta Tag / Open Graph PreviewPreview how your page looks on Google and socialImage Resizer / CropperResize photos, including passport sizeBase64 Image ConverterTurn an image into text code, and back