CSS Triangle Generator
Generate CSS triangles using the border trick. Create arrows, tooltips, decorative elements, and more with pure CSS. Supports gradients, shadows, rotation, and custom styling.
Quick Presets
Direction
Live Preview
Generated CSS
.triangle {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #3b82f6;
}Recommended Settings
Design Best Practices
- •Use triangles sparingly for directional cues and emphasis
- •Keep triangle size proportional to surrounding elements
- •Match triangle colors to your design system palette
- •Consider accessibility - triangles should supplement text, not replace it
Performance Tips
- •Border-based triangles are more performant than clip-path
- •Avoid animating triangle properties directly
- •Use transform for rotation instead of recreating borders
- •Gradients require clip-path which has wider browser support than borders
Common Use Cases
- •Tooltip arrows pointing to referenced elements
- •Dropdown menu indicators
- •Navigation breadcrumb separators
- •Speech bubble tails in chat interfaces
Pro Tips
- •The border trick works by creating thick borders on invisible elements
- •For equilateral triangles, use width = height * 0.866
- •Combine with ::before or ::after for advanced shapes
- •Use clip-path for complex triangle variations
Most Popular
Up/down arrows at 80x80px for navigation indicators
When to Use This Tool
Create small directional arrows that point from tooltips to their reference elements. Essential for clarifying tooltip positioning and improving user understanding of relationships between UI elements.
Recommended: Tooltips & Popovers
Use triangles as visual cues for dropdown menus, expandable sections, and breadcrumb navigation. They provide clear directional guidance and indicate interactive elements to users.
Recommended: Menus & Dropdowns
Add triangular tails to chat messages, comments, and callouts to create speech bubble effects. This helps distinguish between different speakers and adds visual polish to conversational interfaces.
Recommended: Chat & Comments
Incorporate triangles as geometric design elements in headers, banners, ribbons, and corner decorations. They add visual interest and can create modern, angular design aesthetics.
Recommended: Headers & Banners
Create right-pointing triangles for media player controls. This universally recognized shape indicates playback functionality and works well in both light and dark themes.
Recommended: Media Controls
How It Works
Choose a preset or start with basic direction (up, down, left, right)
Adjust width and height to create different triangle proportions
Select a color using the color picker or enter custom values
Add rotation to angle the triangle in any direction
Enable gradient for modern effects (uses clip-path method)
Add shadows for depth using drop-shadow filter
Copy the CSS code or download as a file for your project
100% Private
Files never leave your device. All processing happens locally in your browser.
Lightning Fast
Powered by Pure CSS for optimal performance on modern browsers.
Secure
No data collection, no tracking, no sign-up required.
Frequently Asked Questions
How does the CSS border trick work?
CSS triangles are created by setting an element's width and height to 0, then using thick borders. By making some borders transparent and one border colored, you create a triangle shape. The colored border becomes the triangle, while transparent borders create the angled edges.
Can I use gradients with CSS triangles?
Traditional border-based triangles cannot use gradients directly. However, you can create gradient triangles using the clip-path method with a polygon shape. This tool generates both methods - border-based for simple triangles and clip-path for gradients.
What's the difference between border and clip-path methods?
Border method uses transparent borders and is more widely supported with better performance. Clip-path allows gradients and more complex shapes but has slightly less browser support. Choose borders for simple triangles and clip-path for gradients or complex variations.
How do I create an equilateral triangle?
For an equilateral triangle (all sides equal), set the height to approximately 86.6% of the width (or width = height × 0.866). For example, a 100px base would need an 87px height. You can fine-tune based on visual preference.
Can triangles be animated?
Yes! Use CSS transforms (rotate, scale, translate) for smooth animations. Avoid animating border properties directly as it's less performant. For color changes, animate via CSS custom properties or use transition on the border-color property.
Are CSS triangles accessible?
CSS triangles are purely decorative and don't convey meaning to screen readers. Always provide text labels or ARIA attributes for functional triangles (like dropdown indicators). Never rely solely on triangles to communicate important information.