Width: 60px
Height: 60px
// LIVE PREVIEW
// CSS OUTPUT
// create directional triangles with pure css borders
Generate directional CSS triangles using pure border techniques. Choose direction, size, and color — get clean copy-paste CSS instantly. No images needed.
Click one of the 8 directional buttons in the compass grid to set your triangle's pointing direction.
Use the sliders to set width, height, and color. The live preview updates instantly.
Switch between Element, ::before pseudo-element, or SCSS Mixin output, then click Copy All.
CSS triangles are created using a zero-size element with transparent borders on three sides and a colored border on one side. This generator builds the exact border values for any direction, size, and color — no JavaScript or images needed at runtime.
When an element has zero width and height, its borders form four triangles meeting at the center. By setting three borders to transparent and one to a color, you isolate a single triangle. The size of each border controls the triangle's dimensions.
Yes — for an upward pointing equilateral triangle, set the left and right borders to width/2 and the bottom border to width * 0.866. This generator's width/height sliders let you fine-tune exact proportions.
The ::before pseudo-element is ideal when the triangle is decorative (tooltip arrow, divider accent) and you want to avoid adding extra HTML. Switch to the "::before" tab to get that output.
CSS border triangles are supported in all modern browsers and Internet Explorer 8+. They are one of the most compatible CSS techniques available — no prefixes needed.
Yes. You can animate border-color, border-width, and even combine with transform: rotate(). Because triangles are pure CSS, they work seamlessly with CSS transitions and keyframe animations.
Straight triangles (up, down, left, right) use one non-zero border plus two equal transparent sides. Diagonal triangles (top-left, top-right, etc.) use two adjacent non-zero borders on the same corner, creating a right-angle triangle.
A CSS Triangle Generator is an online tool that produces ready-to-paste CSS code for creating triangles using nothing but HTML and CSS borders. Instead of using images, SVGs, or icon fonts, pure CSS triangles leverage a clever browser rendering quirk: when a block element has width: 0 and height: 0, its four CSS borders form four triangular wedges meeting at the center. By coloring one border and making the rest transparent, you isolate a single perfect triangle.
💡 Looking for premium CSS templates and UI kits? MonsterONE offers unlimited downloads of templates, UI kits, and assets — worth checking out.
Every CSS box model element has four borders: top, right, bottom, and left. Normally these are rectangular and we rarely notice how they meet at the corners. But when you reduce an element to zero dimensions, those border corners become visible as diagonal lines — and the four borders form four right triangles sharing a common center point.
To create an upward-pointing triangle, for example, you set the element to width: 0; height: 0, then apply a transparent left border, a transparent right border, and a colored bottom border. The left and right transparent borders determine the triangle's horizontal width, and the bottom colored border determines its height. The result is a clean triangle rendered entirely by the browser's layout engine.
This generator supports eight triangle directions — four cardinal and four diagonal:
All eight directions are generated using the same zero-size border trick — only the which borders are colored versus transparent changes between them.
Both approaches have legitimate use cases in modern front-end development:
transition and transform.For tooltip arrows, dropdown indicators, and section dividers, CSS triangles remain the most performant and compatible choice. For complex UI illustrations, SVG wins.
One of the most powerful patterns is combining CSS triangles with pseudo-elements. By applying the triangle styles to ::before or ::after, you can attach a triangle to any element without adding extra HTML. This is how most CSS-only tooltips work: the tooltip container is a div, and its ::before provides the pointing arrow below the box.
The generator's ::before tab outputs this exact pattern — complete with content: "", position: absolute, and the border values — ready to paste into your existing selector.
When you use triangles throughout a project, it pays to abstract the values into a reusable SCSS mixin. The SCSS Mixin tab in this generator outputs a parameterized mixin with arguments for direction, width, height, and color — so you call @include triangle(up, 20px, 16px, #333) anywhere in your stylesheet rather than memorizing the border formula.
Because CSS triangles are standard elements, they accept all standard CSS properties. Common animation patterns include:
transform: rotate(180deg) to toggle between up and down arrows on accordion open/close.border-color from transparent to a color on hover to reveal a decorative corner accent.transform: scale() combined with transform-origin for pulsing indicators.These transitions perform at 60fps because they trigger only compositor-layer properties — no layout recalculation is involved.
CSS triangles are purely visual. If the triangle conveys meaningful information (e.g., a sort direction indicator), ensure the parent element has an appropriate aria-label or title attribute. For decorative triangles used as visual flourishes, apply aria-hidden="true" to keep screen readers uncluttered. The ::before pseudo-element approach is particularly good here since pseudo-elements are already ignored by most assistive technologies.