Settings
Preview
Generated CSS
CSS Triangle Generator creates pure CSS triangles without images or SVG. Select the triangle direction (up, down, left, right, or diagonal), size, and color, and get the CSS border trick code ready to paste. Also generates CSS for speech bubble tails, tooltip arrows, and other common triangle shapes used in UI design.
CSS triangles use the border trick: set the element's width and height to 0, then use transparent borders on three sides and a colored border on the fourth side. Since borders meet at 45-degree angles at the corners, this creates a triangle shape. Example: width:0; height:0; border-left:50px solid transparent; border-right:50px solid transparent; border-bottom:50px solid #3b82f6; creates an upward-pointing triangle.
Modern alternatives to CSS border triangles: SVG triangles (more flexible, works inside text flow), CSS clip-path: polygon(50% 0%, 0% 100%, 100% 100%) (cleaner code, scalable), CSS skew transforms (for angled shapes on real elements). For complex shapes, clip-path is now preferred -- it is more readable and works on any element. CSS triangles via borders remain popular for simple tooltip arrows and speech bubbles because of their simplicity and wide support.
Down-pointing triangle
Result: width:0; height:0; border-left:20px solid transparent; border-right:20px solid transparent; border-top:20px solid #3b82f6;
Tooltip arrow
Result: .tooltip::after { content:''; position:absolute; top:100%; left:50%; border:8px solid transparent; border-top-color:#333; }
Right-pointing triangle
Result: width:0; height:0; border-top:30px solid transparent; border-bottom:30px solid transparent; border-left:30px solid #e11d48;
How does the CSS border triangle trick work?
When a block element has zero width and height, its borders still render -- and adjacent borders meet at 45-degree angles at the corners. Set three borders to transparent and one to a color: the colored border side points away from the visible part, creating a triangle. Example for upward triangle: the bottom border is colored (blue); left and right borders are transparent. The visible shape is the bottom border colored triangle pointing up. Size: the colored border's width sets the triangle height; the transparent borders' widths set the triangle width (each half).
What is CSS clip-path and how does it compare to border triangles?
clip-path: polygon(x1 y1, x2 y2, x3 y3) clips an element to a polygon shape -- great for triangles: clip-path: polygon(50% 0%, 0% 100%, 100% 100%) makes an upward triangle. Advantages over border trick: works on elements with actual content and background images, more readable code, scalable without recalculating borders, can animate between shapes. Disadvantages: the invisible clipped area still takes up space in the layout (use for visual shapes on real elements). Browser support: all modern browsers. For tooltip arrows, the border trick is often simpler.
How do I create a speech bubble with CSS?
A speech bubble has a box plus a triangle tail. Use ::after pseudo-element for the tail: .bubble { position:relative; background:#333; border-radius:8px; padding:16px; } .bubble::after { content:''; position:absolute; bottom:-12px; left:24px; border-width:12px 8px 0; border-style:solid; border-color:#333 transparent transparent; }. This creates a tail pointing down-left. Adjust bottom/left/right/top positioning to place the tail. Use clip-path on the pseudo-element for more complex tail shapes.
Can CSS triangles be responsive?
CSS border triangles use fixed pixel values -- they don't scale with viewport width automatically. For responsive triangles: use vw/vh units in the border widths (border-left: 5vw solid transparent). Use CSS custom properties: --size: 20px; border-width: var(--size); -- then change --size in media queries. Use SVG instead for fully responsive vector triangles: svg { width: 100%; height: auto; }. Use clip-path: polygon() on a percentage-sized element -- the polygon points are percentage-based by default.
What are common use cases for CSS triangles?
Common UI patterns using CSS triangles: tooltip/popover arrows (the pointing tail), dropdown menu caret indicators (the expand/collapse arrow), accordion expand arrows, navigation breadcrumb separators, progress step connectors, decorative diagonal section dividers (large clip-path triangles behind content), card corner ribbon indicators, table sort direction indicators. For most of these, CSS triangles (border trick or clip-path) are preferred over images because they scale, are colorizable with CSS, and add no HTTP requests.