What directions can triangles point?

The four cardinal directions — up, down, left, right — each come from coloring one border and making the other three transparent. Diagonal triangles work a little differently, with two adjacent borders solid and the two opposite ones transparent, giving you the right-angle half of a square. The generator produces all of these, so you just pick the direction you want and it emits the matching snippet.

Why use CSS triangles rather than SVG?

Each has tradeoffs. CSS triangles add zero markup, recolor cleanly through CSS variables for theme switches, and need no extra files. SVG gives you crisp anti-aliased edges at any size, more shape options, and richer animation primitives. For simple pointers — tooltip carets, dropdown arrows, ribbon corners — the CSS trick is plenty. For complex or large shapes where edge aliasing becomes visible, SVG is the right call.

Can I make a colored triangle on a transparent background?

Yes, and that's actually the standard pattern. The element itself has no background — only the one colored border is visible — so the triangle floats over whatever happens to be behind it. That's why the technique works for tooltips on arbitrarily colored backgrounds, decorative flourishes, and callouts pointing at anything on the page.

How do I make speech bubble pointers?

The standard recipe is to attach a ::before or ::after pseudo-element to the tooltip container and position it absolutely against the edge that should point at the target. Set the colored border to match the tooltip's background and the triangle reads as part of the bubble rather than a separate shape. The pattern works in every browser and avoids cluttering your markup with an extra element.

What size should triangles be?

Match the size to the surrounding UI. Small indicators land around 8 to 12 pixels per side, medium decorations around 15 to 25, and big arrow shapes 30 to 50. For tooltip carets, about 10 pixels usually feels right. Once you push past around 50 pixels, the edges start to look faintly stair-stepped on some browsers, and that's the point where you should switch to SVG for crisp anti-aliasing.

Can the triangle be animated?

Yes. Animating the colored border-color produces smooth tint transitions, animating border-width grows or shrinks the shape, and applying transform with rotate or scale gives you spinning or pulsing arrows. CSS transitions handle all of that with reasonable performance. It's a useful trick for hover states on chevrons, attention-getting indicators, and disclosure widgets that flip when their parent is opened.

Is the data sent anywhere?

No. The generator just turns your direction-and-size choices into a CSS snippet, all in the browser. Whatever sizes and colors you experiment with stay on your machine, with nothing uploaded or logged.

CSS Triangle Generator

Generate pure CSS triangles and arrows with customizable size, direction, and color. Free CSS triangle code generator with live preview.

CSS Tools Generators

Instant results

Direction

Width: 100px

10px300px

Height: 80px

10px300px

Color

Live Preview

100px wide x 80px tall, pointing up

Generated CSS

.triangle {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 80px solid #f59e0b;
}

HTML

<div class="triangle"></div>

How CSS Triangles Work

CSS triangles are created using the border trick. When an element has zero width and height, its borders form triangles at each edge. By making the opposite border solid and the adjacent borders transparent, you get a triangle pointing in the desired direction. This technique is widely supported and requires no images or SVG.

Size Presets

How to Use CSS Triangle Generator

Choose a direction

Pick which way the triangle should point — up, down, left, right, or one of the diagonal options. Your choice determines which of the four borders gets the color and which three end up transparent, which is what produces the directional shape.

Set size and color

Adjust the size — the border width is what controls how big the triangle ends up — and pick a color that matches your design system or brand. Wiring the color through a CSS variable rather than a hard-coded hex makes dark mode and theme variants much easier to handle later.

Preview the triangle

Watch the live preview update as you change the direction, size, and color. Verify that the proportions look the way you want — particularly important when the triangle is going to act as a tooltip caret, since a slightly off proportion reads as 'something feels wrong' the moment you put it in context.

Copy the CSS code

Copy the generated snippet and drop it into your stylesheet. The most common pattern is to apply it to a ::before or ::after pseudo-element on a tooltip container rather than adding an extra HTML element, which keeps your markup clean and lets the triangle move with its parent automatically.

When to Use CSS Triangle Generator

Tooltips and callouts

Speech-bubble pointers, dropdown carets, and message arrows are the textbook home for CSS triangles. Building them from borders means no images to ship, perfect retina rendering, and a color you can change with a single CSS variable. The generator emits the snippet for any direction including the four cardinals and diagonals.

Dropdown indicators

Down-pointing arrows on selects, accordion headers, and disclosure widgets are usually better as a CSS triangle than as a tiny image. You skip the network request, never have to ship a 2x version, and can recolor for hover and dark mode with one line. The generator hands you ready-to-paste CSS.

Decorative elements

Cut-corner banner ribbons, little visual flourishes, and arrow indicators on stat cards all benefit from the same trick. They add visual interest without dragging in image assets, and because the color is a normal CSS property they pick up theme switches automatically.

Learning the technique

The reason this works at all is that adjacent borders meet at 45-degree miters. Once you see it once, the trick is unforgettable, and the generator makes the relationship between the four border declarations and the resulting shape much easier to grasp than reading about it in the abstract.

CSS Triangle Generator Examples

Up-pointing triangle

Input

Direction: up, size: 20px, color: #333

Output

border-left: 20px solid transparent;\nborder-right: 20px solid transparent;\nborder-bottom: 20px solid #333;\nwidth: 0;\nheight: 0;

This is the canonical form. With width and height both zero, the element has no content area, and only the borders are visible. The bottom border is colored while the left and right are transparent, so what you see is a triangle whose base is at the bottom and whose point is at the top.

Right-pointing

Input

Direction: right, size: 15px, color: #4A90E2

Output

border-top: 15px solid transparent;\nborder-bottom: 15px solid transparent;\nborder-left: 15px solid #4A90E2;\nwidth: 0;\nheight: 0;

Same trick rotated. The left border holds the color and the top and bottom are transparent, so the visible triangle points to the right. This is the shape you reach for as a custom list bullet, breadcrumb separator, or collapsed-state disclosure marker.

Speech bubble pointer

Input

Combine triangle with rounded rectangle parent for tooltip

Output

Triangle positioned absolutely at edge of bubble, pointing toward target element. Color matches bubble background for seamless appearance.

The everyday use case is a tooltip. Style the parent as a rounded rectangle, then drop a triangle into a ::before or ::after pseudo-element absolutely positioned at the edge. Match its color to the bubble's background and the two shapes read as a single connected pointer.

Tips & Best Practices for CSS Triangle Generator

1.The element absolutely needs width: 0 and height: 0. Without them the borders wrap around an actual content box and you end up with a chunky outlined rectangle instead of a clean triangle.
2.The recipe is always three transparent borders plus one solid one — and whichever side you color is the side opposite the triangle's point. Switch the colored border to change direction without touching anything else.
3.Diagonal triangles use a slightly different mix — keep one or two borders transparent and color two adjacent borders. The result is the right-angled half of a square, useful for ribbon corners and chevron-style decorations.
4.Wire the color through a CSS variable. Writing 'border-bottom-color: var(--bubble-color)' instead of a hard-coded hex means a single token swap handles dark mode, brand variants, and component states without copy-pasting the snippet.
5.Watch out at large sizes. Once you push past about 50 pixels per side the edges start looking faintly stair-stepped on some browsers. For anything that big, an SVG triangle gives you crisp anti-aliased edges and is worth the extra markup.
6.Pair triangles with absolute positioning to attach them to a host element, and put them in ::before or ::after rather than adding extra DOM. Markup stays clean and the triangle moves with the parent automatically.

Frequently Asked Questions

An element with width and height set to zero has no content area at all, so its borders draw around an empty point. Whenever two adjacent borders meet at that corner, the renderer slices the join with a 45-degree miter. If you make three of the four borders transparent and color the fourth, only that diagonal slice is visible — and what you see is a triangle pointing away from the colored side. It's pure CSS exploiting normal border-rendering rules.

CSS Triangle Generator

Generated CSS

HTML

How CSS Triangles Work

Size Presets

How to Use CSS Triangle Generator

Choose a direction

Set size and color

Preview the triangle

Copy the CSS code

When to Use CSS Triangle Generator

Tooltips and callouts

Dropdown indicators

Decorative elements

Learning the technique

CSS Triangle Generator Examples

Up-pointing triangle

Right-pointing

Speech bubble pointer

Tips & Best Practices for CSS Triangle Generator

Frequently Asked Questions

Related Tools

Glassmorphism Generator

Neumorphism Generator

AI CSS Generator

Gradient Generator

Box Shadow Generator

Border Radius Generator