WebToolsPlanet
css Tools

CSS Triangle Generator

Create pure CSS triangles in any direction using the border trick — for tooltips, arrows, and decoration.

Last updated: March 25, 2026

Client-Side Processing
Input Data Stays on Device
Instant Local Execution

Find this tool useful? Support the project to keep it free!

Buy me a coffee

What is CSS Triangle Generator?

CSS triangles exploit a geometric property of how borders are rendered. When an element has zero width and zero height (width: 0; height: 0), its four borders meet at the center point of the element. Each border occupies one quadrant of this meeting point. By making three borders transparent and one border opaque-colored, the visible border quadrant appears as a filled triangle pointing towards the element center from that border's side.

The direction the triangle points depends on which border is colored: border-bottom = triangle pointing up (the colored bottom border fills the bottom half of the element), border-top = triangle pointing down, border-left = triangle pointing right, border-right = triangle pointing left. The size of the triangle is controlled by the border-width values — the colored border's width sets the height of the triangle, and the adjacent borders' widths set the horizontal spread. Unequal adjacent border widths create right-angled or isosceles variants.

How to Use CSS Triangle Generator

1

Select the direction the triangle should point: Up, Down, Left, Right, or a diagonal corner direction

2

Adjust the triangle's Base Width (horizontal spread) and Height (how tall/deep the triangle is)

3

Choose the Fill Color from the color picker

4

Preview the resulting CSS triangle in real-time in the preview panel

5

Click "Copy CSS" to get the complete selector-ready CSS code for the triangle element

Common Use Cases

  • Creating a speech bubble or tooltip pointer arrow (triangle attached to a bubble box)
  • Dropdown menu downward-pointing indicator chevron for a select-style menu
  • Breadcrumb navigation separator using a right-pointing triangle between path segments
  • Creating a "corner ribbon" effect using a colored triangle clipped into a card corner
  • Decorative diagonal divider between page sections as an alternative to a straight horizontal rule
  • Visual indicator pointing to the active item in a vertical navigation sidebar
  • Accordion or collapsible section toggle indicator (triangle rotates 90° on open)
  • CSS-only decorative bullet point using a small right-pointing triangle instead of a disc

Example Input and Output

Creating a tooltip "caret" — a downward triangle attached below a tooltip box:

Triangle configuration
Direction: Points down (caret pointing to content below)
Base width: 20px (10px each side)
Height: 10px
Color: #333 (match tooltip background)
CSS for tooltip + caret
/* Down-pointing triangle (used as tooltip caret) */
.tooltip::after {
  content: '';
  position: absolute;
  top: 100%;        /* position below the tooltip box */
  left: 50%;
  transform: translateX(-50%);

  width: 0;
  height: 0;

  /* Transparent side borders set total width  */
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;

  /* Colored top border creates the downward triangle */
  border-top: 10px solid #333;
}

/* Tooltip container */
.tooltip {
  position: relative;
  background: #333; color: #fff;
  padding: 6px 10px; border-radius: 4px;
}

Client-Side Processing

All CSS generation and preview happen locally in your browser. No data is sent to our servers.

Modern Alternative: clip-path

For more complex triangle needs, use clip-path: polygon(). Unlike the border trick, clip-path elements can have background-color, background-image, gradients, and children: div { width: 100px; height: 80px; clip-path: polygon(50% 0%, 0% 100%, 100% 100%); background: #333; }. This creates a filled upward triangle without the width:0 constraint of the border trick.

Pseudo-Element Usage

In practice, CSS triangles are almost always implemented using ::before or ::after pseudo-elements on the parent element (like a tooltip or dropdown), not on dedicated empty <div> elements. This avoids adding meaningless markup: .tooltip::after { content: ""; width: 0; height: 0; ... }. The content: "" is required for the pseudo-element to render even when it has no text content.

Frequently Asked Questions

Why does setting a border create a triangle?
Browser borders are drawn as trapezoids that meet at 45° angles at the corners when an element has a positive size. When width and height are set to 0, the trapezoids become full triangles meeting at a center point. Making three borders transparent hides three triangles, leaving one colored triangle visible. This is why border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid #333 produces a downward triangle — the three transparent borders frame the visible top border triangle.
How do I change the triangle orientation?
The direction a CSS triangle points is opposite to the border you color. Color the top border → triangle points downward. Color the bottom border → triangle points upward. Color the left border → triangle points rightward. Color the right border → triangle points leftward. Mnemonic: the colored border is the base of the triangle — the triangle points away from it.
How do I create an isosceles vs right-angled triangle?
Isosceles (equal sides): set the two adjacent transparent borders to the same width. Example: border-left: 10px solid transparent; border-right: 10px solid transparent becomes symmetric. Right-angled triangle: set one side-border to 0 — border-left: 0; border-right: 20px solid transparent; border-bottom: 20px solid red — creates a triangle with a right angle at the bottom-left corner, pointing up-right.
Are CSS triangles accessible?
CSS triangles are purely decorative and convey no semantic content. Always add aria-hidden="true" to the element containing a CSS triangle, especially when used as a tooltip caret, dropdown arrow, or decorative bullet. Screen readers will skip aria-hidden elements. Never use a CSS triangle to convey important directional information without an accessible text alternative.
Is the CSS border trick better than using SVG triangles?
CSS border triangles: minimal markup (a single pseudo-element), no SVG knowledge needed, but render at non-pixel sizes can show aliased edges. SVG triangles: resolution-independent (perfect at any size), can have gradients and strokes, but require more markup. For small UI elements (tooltip carets, dropdown indicators), the CSS border trick is widely used and practical. For large decorative triangles at high DPI, SVG or clip-path: polygon() gives cleaner edges.
Can I use clip-path instead of the border trick?
Yes — clip-path: polygon(50% 0%, 0% 100%, 100% 100%) creates an upward triangle by clipping the element. This is more flexible than the border trick: clip-path triangles can have backgrounds, gradients, and children; they don't require width: 0. Browser support: all modern browsers — Chrome, Firefox, Safari, Edge. clip-path is the recommended modern approach for triangles; the border trick is a legacy technique but still widely used due to its zero-dependency simplicity.

How This Tool Works

The triangle preview is rendered by a <div> with the configured border values applied inline. When direction or size changes, border-width values are recalculated: the colored border width = triangle height, and the two adjacent transparent border widths = half the base width each. The fourth border (opposite the direction) is set to 0. The assembled CSS block is formatted for display and clipboard copy.

Technical Stack

CSS border-width trickCSS pseudo-elementsclip-path polygon() alternativeClient-side only

Related Tools

CSS Unit Converter
Convert between PX, REM, EM, VW, VH, and % CSS units — with configurable base font size and live conversion.
Box Shadow Generator
Create CSS box shadows with a visual editor.
CSS Gradient Generator
Create beautiful CSS gradients with a visual editor.
Border Radius Generator
Create complex CSS border-radius shapes with independent corner controls — from rounded buttons to organic blobs.
Flexbox Generator
Build CSS Flexbox layouts visually — configure every container and item property and get ready-to-use CSS.
CSS Grid Generator
Build CSS Grid layouts visually — configure columns, rows, gaps, and named areas and copy production-ready CSS.