Productive Toolbox

CSS Triangle Generator

Create pure CSS triangles for tooltips, arrows, and card decorations with live preview

Triangle Controls

Preview

Size Presets

CSS Code

.triangle {
  width: 0;
  height: 0;
  border-style: solid;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-bottom: 20px solid #000000;
}

HTML Snippet

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

Actions

CSS Triangle Generator - Create Pure CSS Arrows & Shapes

Generate pure CSS triangles for tooltips, arrows, dropdown indicators, speech bubbles, and UI decorations. Our CSS Triangle Generator uses the border trick technique to create triangles with zero width and height, making them perfect for modern web design.

How CSS Triangles Work

CSS triangles are created using the border property trick. By setting width and height to 0 and using transparent borders on three sides with a colored border on one side, you can create triangle shapes pointing in any direction. This technique is widely used for tooltips, dropdown arrows, and speech bubble pointers.

Common Use Cases

  • Tooltip Arrows: Point to specific elements with triangle indicators
  • Dropdown Menus: Create arrow indicators for expandable content
  • Speech Bubbles: Add pointer tails to chat messages and callouts
  • Card Decorations: Enhance UI cards with geometric triangle accents
  • Navigation Elements: Create directional arrows for pagination and breadcrumbs
  • Progress Indicators: Use triangles as step markers in multi-step processes

Triangle Direction Guide

Upward Triangle (Top)

Perfect for tooltips that appear below elements, dropdown indicators, and upward-pointing arrows.

Downward Triangle (Bottom)

Ideal for tooltips above elements, menu dropdowns, and downward navigation arrows.

Left Triangle

Great for side tooltips, previous buttons, and left-pointing navigation elements.

Right Triangle

Perfect for next buttons, right-side tooltips, and forward navigation indicators.

Size Recommendations

  • Small (20×15px): Subtle indicators and small UI elements
  • Medium (40×30px): Standard tooltips and dropdown arrows
  • Large (60×45px): Prominent navigation arrows and decorative elements
  • Tooltip (16×8px): Optimized for tooltip pointers
  • Arrow (24×12px): Perfect for button arrows and indicators
  • Pointer (32×24px): Ideal for speech bubble tails

Implementation Tips

  • Use relative positioning to precisely place triangles next to other elements
  • Combine with pseudo-elements (::before, ::after) for cleaner HTML structure
  • Consider using CSS custom properties for dynamic color theming
  • Test triangle visibility against different background colors
  • Use transform properties for rotation and advanced positioning
  • Ensure triangles scale properly on different screen sizes

Browser Compatibility

CSS triangles using the border technique are supported in all modern browsers including Chrome, Firefox, Safari, Edge, and Internet Explorer 9+. This makes them a reliable choice for cross-browser compatible UI elements without requiring additional JavaScript or image assets.

💡 Pro Tip

For responsive designs, consider using viewport units (vw, vh) or em units instead of fixed pixels to ensure your triangles scale appropriately across different screen sizes and zoom levels.

Related Tools

📦

CSS Box Shadow Generator

Generate layered CSS box shadows with live preview, inset controls, presets, and copy-ready code

Try it now→
🌈

CSS Gradient Generator

Create linear and radial CSS gradients with editable stops, live preview, and copy-ready CSS code

Try it now→
🎨

Color Format Converter

Convert HEX, RGB, RGBA, HSL, HSLA, and CMYK values with live preview, slider controls, and one-click copy

Try it now→