CSS Triangle Generator

About CSS Triangle Generator

How the CSS Border Trick Works

CSS triangles exploit how browsers render borders on elements with zero width and height. When four borders meet on a zero-dimension element, each border occupies a triangular wedge. The browser draws each side as a trapezoid that collapses to a triangle when the element has no content area. By making one side coloured and the adjacent sides transparent, only the visible border remains - forming a triangle shape.

The technique dates back to the early 2010s and was popularised by Chris Coyier's CSS-Tricks snippet. It became the standard approach for tooltip arrows and dropdown indicators long before clip-path had broad browser support.

Triangle Direction	Coloured Border	Transparent Borders
Up (pointing up)	border-bottom	border-left, border-right
Down (pointing down)	border-top	border-left, border-right
Left (pointing left)	border-right	border-top, border-bottom
Right (pointing right)	border-left	border-top, border-bottom
Top-left	border-top	border-right (border-bottom and border-left set to 0)
Top-right	border-top	border-left (border-bottom and border-right set to 0)
Bottom-left	border-bottom	border-right (border-top and border-left set to 0)
Bottom-right	border-bottom	border-left (border-top and border-right set to 0)

For a triangle pointing up, the visible border is on the bottom (the base), with left and right borders transparent (forming the angled sides). The triangle's height equals the bottom border width, and the base width equals the sum of the left and right border widths.

How Does Triangle Size Control Work?

Width and height are controlled independently through different border properties. For cardinal directions (up, down, left, right), one border sets the triangle's height while the two adjacent transparent borders set the base width. For diagonal triangles, two perpendicular borders control the shape - one coloured and one transparent.

Dimension	Controlled By	Example
Height (up/down triangles)	Coloured border width	border-bottom: 20px solid #333
Base width (up/down triangles)	Transparent border widths	border-left: 15px solid transparent
Equilateral triangle	All borders equal width	All borders 20px
Narrow triangle	Larger height, smaller base	Bottom: 30px, left/right: 10px
Wide triangle	Smaller height, larger base	Bottom: 10px, left/right: 30px

Worked example - a 60px tall, 80px wide upward triangle: Set border-bottom to 60px solid with your colour. Set border-left and border-right each to 40px solid transparent (half the desired base width per side). The element needs width: 0 and height: 0. The total rendered shape is 80px across the base and 60px from base to tip.

Common Uses for CSS Triangles

The border trick shows up in most CSS frameworks and design systems. Bootstrap, Tailwind UI, and Material Design all use some form of CSS triangle for dropdown indicators and tooltip pointers. Here are the most common patterns.

Use Case	Direction	Typical Size	Positioning
Tooltip arrow	Down (points at target)	6-10px	Absolute, centred on tooltip edge
Dropdown indicator	Down	4-6px	Inline after text or button label
Breadcrumb separator	Right	8-12px	Between breadcrumb items
Accordion expand icon	Right (closed) / Down (open)	6-8px	Before or after the heading text
Speech bubble tail	Down-left or down-right	10-15px	Absolute on bubble edge
Decorative corner	Diagonal	20-40px	Absolute on card or banner corner
Step indicator arrow	Right	Full element height	Absolute on right edge of step
Ribbon fold	Bottom-right / bottom-left	5-10px	Behind ribbon element

Tooltip Arrow Step by Step

The most common use of CSS triangles is adding an arrow to a tooltip. The technique uses a pseudo-element (::after) on the tooltip container positioned at the edge. For a tooltip sitting above the target with an arrow pointing down:

CSS Property	Value	Purpose
content	""	Creates the pseudo-element
position	absolute	Positions relative to tooltip
bottom	-8px (negative arrow height)	Places arrow below tooltip
left	50%	Centres horizontally
transform	translateX(-50%)	Adjusts for arrow width
border-top	8px solid #333	Creates the visible triangle
border-left/right	6px solid transparent	Creates the angled sides

To add a visible border around the tooltip arrow, layer two triangles - a slightly larger one in the border colour behind a smaller one in the background colour. Use both ::before (border colour, offset by 1px more) and ::after (fill colour) pseudo-elements. This layering approach is the standard pattern used by libraries like Tippy.js and Popper.js.

CSS Triangles vs Other Approaches

The border trick is not the only way to draw triangles in CSS. Each method has trade-offs depending on browser support requirements, shape complexity, and whether borders or shadows are needed on the shape itself.

Method	Pros	Cons	Best For
Border trick (this tool)	No extra markup, works everywhere including IE8+, zero file size	Limited to triangles, cannot add borders or shadows to the shape	Tooltip arrows, small UI indicators
clip-path: polygon()	Any polygon shape, works with backgrounds and images, inherits parent styles	Cannot clip borders onto the shape, supported in all modern browsers but not IE	Complex shapes, image masks, responsive elements
SVG inline	Fully scalable, supports borders, shadows, and gradients on the shape	More markup, slightly larger DOM footprint	Icons, decorative shapes, complex illustrations
CSS transform: rotate(45deg)	Can apply box-shadow and border to the shape	Produces a rotated square (diamond), not a true triangle	Tooltip arrows that need visible borders or shadows
Background image	Any shape, pixel-perfect control	Extra HTTP request, not scalable, blurry on retina	Complex decorative elements where CSS cannot replicate the shape

For projects that need to support IE11 or older, the border trick remains the safest choice. For modern codebases targeting evergreen browsers, clip-path: polygon() is often cleaner - the CSS Clip Path Generator supports arbitrary polygons with a visual editor. According to Can I Use, clip-path with basic shapes has around 97% global browser support as of early 2026.

When Should You Use clip-path Instead?

The border trick has a few practical limitations. The shape cannot inherit the background colour of its parent, so updating a tooltip theme means manually updating the triangle colour too. Adding a visible border or drop shadow to the triangle itself is not possible without layering a second pseudo-element. The shape is not responsive to container size changes without recalculating border widths.

clip-path: polygon() solves all three problems. A clipped element can use background-color: inherit, responds to percentage-based sizing, and renders smoothly at any resolution. The trade-off is that clip-path clips the content area, so any border set on the element is also clipped away. For tooltip arrows that need a visible border, the rotated-square technique (transform: rotate(45deg) on a small div with overflow: hidden on the parent) is usually the best modern option.

For rounded triangles, clip-path alone will not work since polygon() only produces straight edges. CodyHouse documented a technique combining clip-path with SVG path data to produce rounded corners on triangle shapes. For standard sharp triangles, the border trick generates the smallest possible CSS output.

Rendering Quirks and Tips

A few things to watch out for when using CSS triangles in production:

Sub-pixel rendering: Triangles with odd-numbered dimensions can produce slightly uneven edges because the browser has to split a pixel. Using even numbers for border widths avoids this. On retina displays this is rarely noticeable, but on 1x screens Firefox in particular can show jagged diagonals on non-45-degree triangles.

Transparent border anti-aliasing: Some browsers render a faint line at the junction between coloured and transparent borders. Setting the transparent borders to the same colour as the page background (instead of "transparent") eliminates this, though it means the triangle only works on that specific background colour.

Print stylesheets: CSS triangles render correctly in print, but the transparent borders may show as thin lines on some printers. For print-critical layouts, an inline SVG triangle is more reliable.

Animation: Border-based triangles can be animated with CSS transitions on border-width and border-color properties. Transitioning border-width smoothly resizes the triangle. Combined with transform: rotate(), a right-pointing triangle can animate to a downward-pointing one for accordion toggles.

High-DPI screens: The border technique renders sharply on retina and high-DPI displays because it is vector-based - the browser calculates the border geometry mathematically rather than rasterising a bitmap. This is a significant advantage over background-image triangles, which need 2x or 3x resolution assets to look crisp on modern screens.

RTL layouts: In right-to-left layouts, left-pointing and right-pointing triangles may need to be swapped. CSS logical properties do not apply to the border trick since it uses physical directions (left, right). The simplest fix is to use a data attribute or class swap to flip the coloured border side for RTL users.

Quick Reference - CSS for All Eight Directions

Each direction requires a specific combination of coloured and transparent borders. Below is the full set for a 20px triangle.

Direction	CSS Code
Up	border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 20px solid #333;
Down	border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 20px solid #333;
Left	border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-right: 20px solid #333;
Right	border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-left: 20px solid #333;
Top-left	border-top: 20px solid #333; border-right: 20px solid transparent;
Top-right	border-top: 20px solid #333; border-left: 20px solid transparent;
Bottom-left	border-bottom: 20px solid #333; border-right: 20px solid transparent;
Bottom-right	border-bottom: 20px solid #333; border-left: 20px solid transparent;

All eight examples above use width: 0 and height: 0 on the element. The diagonal directions only need two border declarations instead of three.

For rounding corners on boxes, the CSS Border Radius Generator handles that visually. For layered visual effects, the CSS Box Shadow Generator pairs well with tooltip containers that use triangle arrows. Everything runs in the browser with no server processing.

Sources

• CSS-Tricks - CSS Triangle
• MDN Web Docs - clip-path
• Can I Use - CSS clip-path
• CodyHouse - Creating Rounded Triangles with clip-path
• Alvaro Montoro - Drawing a Triangle with CSS