CSS Triangle Generator
The CSS triangle generator builds pure-CSS triangles for you visually, so you never have to hand-calculate border widths or clip-path coordinates again. Pick a direction, set the size and color, and copy ready-to-paste CSS for a tooltip arrow, dropdown caret, breadcrumb chevron, or corner ribbon.
It supports both classic techniques. The border trick sets the element's width and height to zero and shapes a colored triangle out of transparent borders, working in every browser. Clip-path uses clip-path: polygon() on a colored box for cleaner, more readable code in modern browsers. Both produce the same shape, and you can compare the two side by side before you copy.
How to Use
Choose a direction
Click one of the 8 buttons in the direction grid. The four cardinal directions (Top, Right, Bottom, Left) make standard triangles, while the four diagonal directions (Top Left, Top Right, Bottom Left, Bottom Right) make right-angle corner triangles.
Set the size
Drag the Width and Height sliders or type exact values from 1 to 500 pixels. Toggle Lock aspect ratio to keep both dimensions equal — changing one updates the other.
Pick a color
Use the color picker for any custom color, or click one of the preset swatches for a quick choice. The preview and the generated code update instantly.
Select a method and copy
Switch the Method between Border and Clip-path, use the code tabs to compare both, then click Copy CSS to send the code straight to your clipboard. Hit Reset any time to return to the defaults.
Features
8 Directions
Point the triangle Top, Right, Bottom, or Left for standard shapes, or use the four diagonal directions for right-angle corner triangles.
Precise Size Controls
Set width and height independently from 1 to 500px with sliders or number inputs, and lock the aspect ratio for proportional scaling.
Color Customization
Pick any color with the native color picker or choose from 8 preset swatches: indigo, dark, white, red, green, blue, amber, and violet.
Border & Clip-path Methods
Generate code with the classic transparent-border trick for maximum support, or a clip-path polygon for cleaner, modern CSS.
Live Preview
See your triangle rendered in real time on a checkerboard background, with an info bar showing the current dimensions and direction.
Auto-scaling Preview
Large triangles automatically scale down to fit the preview area while keeping accurate proportions.
12 Built-in Presets
Start from common shapes — arrows in all four directions, thin and wide arrows, tooltip arrows, a caret, corner triangles, and a flag.
Dual Code Tabs
View and compare the generated CSS for both methods with the tab switcher; the code updates instantly as you change any setting.
One-click Copy
Copy the CSS for the active method to your clipboard with a single click, ready to paste into your stylesheet.
Reset to Defaults
Return the direction, size, color, and method to their starting values at any time with the Reset button.
Frequently Asked Questions
How do you make a triangle in CSS?
The two common ways are the border trick and clip-path. With this generator you just pick a direction, size, and color, then copy the CSS — there is no math to do by hand. Choose the Border method for the widest browser support, or Clip-path for cleaner, modern code.
How does the CSS border trick create a triangle?
When an element has zero width and height, its four borders meet along diagonal lines. By making some borders transparent and leaving one border colored, only that colored border's triangular area stays visible, which forms the triangle shape.
Should I use the border trick or clip-path?
Use the border trick when you need to support very old browsers, since it works everywhere. Use clip-path for modern projects where you want shorter, more readable CSS with explicit width and height. Both produce a visually identical triangle, so you can switch the Method and compare.
How do I change the triangle's direction?
Click any of the 8 direction buttons. The cardinal directions (Top, Right, Bottom, Left) make a standard triangle pointing that way, while the diagonal directions (Top Left, Top Right, Bottom Left, Bottom Right) make right-angle corner triangles for ribbons and folded-corner effects.
Can I create equilateral triangles?
Yes. For a triangle that looks equilateral pointing up or down, set the width to about 1.15× the height (for example 115×100). For a mathematically exact equilateral triangle, the width should equal the height × 2 / √3.
Why does my triangle look blurry at small sizes?
Very small triangles (under about 10px) can appear blurry because of sub-pixel rendering, which is a browser limitation rather than a problem with the code. Use a slightly larger size, or pick dimensions that result in whole-pixel border values, to keep the edges crisp.
Can I animate a CSS triangle?
Yes. Border-trick triangles can animate their border-width and border-color. Clip-path triangles are more flexible — you can animate the polygon points, background color, width, and height for smooth shape transitions.
No comments yet. Be the first to comment!