CSS Triangle Generator
Pick a direction, size, and color to build a pure CSS triangle, then copy the code.
Runs entirely in your browser. Nothing you enter is uploaded.
How to use this tool
Choose the way you want the arrow to point from the Direction menu. Set the
Width and Height in pixels to control how wide and tall the triangle is, then
pick a fill color with the color swatch or by typing a hex value. The live
preview updates as you change anything, and the ready-to-use CSS triangle
generator code appears in the text box below. Click Copy CSS to put it on your
clipboard, or Download .css to save it as a file. Paste the rule onto a
div or pseudo-element in your own stylesheet and the arrow shows up
with no images and no extra markup.
How the border hack arrow works
The classic CSS triangle is a border hack. When an element has zero width and zero height, its four borders meet at the center and each one is a slanted shape rather than a straight bar. If you make three of the four borders transparent and give the remaining one a solid color, the colored border renders as a triangle. The two transparent side borders set the base of the triangle, so each is half of the total width, while the opaque border sets the height. Swapping which border is colored changes the triangle direction shape: a solid bottom border points up, a solid top border points down, and so on. For a diagonal corner arrow, you color one border and make only one neighbor transparent, which gives a right-angle CSS arrow.
A real example
Say you want an arrow pointing up that is 100 pixels wide and 70 pixels tall in
blue (#4f8cff). Half of 100 is 50, so the left and right borders are
50 pixels of transparent, and the bottom border is the full 70 pixels in blue. The
generated rule is width: 0; height: 0; border-left: 50px solid transparent;
border-right: 50px solid transparent; border-bottom: 70px solid #4f8cff;.
Apply that to an empty div and you get a clean upward triangle that
scales crisply on any screen because it is drawn by the browser, not stored as an
image.
Common questions
Why is the element width and height set to zero?
The triangle is made entirely from the borders. A zero-size box forces all four borders to collapse to a single point so each renders as a wedge. Any real width or height would push the borders apart and break the triangle shape.
How do I change the triangle direction?
Color a different border. A solid bottom border points up, a solid top border points down, a solid right border points left, and a solid left border points right. This tool sets the right borders for you when you pick a direction.
Can I use this CSS arrow on a pseudo-element?
Yes. Put the generated rule inside a ::before or ::after block, add content: "";, and set position as needed. This is how speech bubbles, tooltips, and dropdown carets usually add their arrow without extra HTML.
Does the triangle scale on high-resolution screens?
It does. Because the shape is drawn from borders rather than a bitmap, it stays sharp at any zoom level or pixel density, the same way text and other vector-style CSS shapes do.
Why does my color value not apply?
Make sure the text field holds a valid color, such as a hex code like #4f8cff or a named color like tomato. If the value is invalid the preview keeps the last good color. The color picker always writes a valid hex value.