Our free CSS Triangle Generator provides front-end developers, web designers, and UI engineers with an in-browser utility to generate CSS-only triangles, tooltip pointers, speech bubbles, and popover arrows. Supports 8 directional orientations including cardinal (Up, Down, Left, Right) and 45-degree diagonal corner triangles (Top-Left, Top-Right, Bottom-Left, Bottom-Right). Choose between legacy browser-compatible zero-width border miter tricks and modern CSS clip-path: polygon() vector geometry. Export clean CSS declarations, ::after pseudo-element rules, and Tailwind CSS arbitrary classes with 100% local client-side execution.
Choose one of 8 triangle directions and select Border-Trick or Clip-Path mode.
Adjust width and height sliders, pick a color, and test visibility on light or dark canvas backgrounds.
Copy instant code declarations for standard CSS rules, tooltip ::after pseudo-elements, or Tailwind CSS classes.
Supports both legacy zero-width border miter tricks and modern CSS clip-path: polygon() vector geometry.
Generates ready-to-use CSS ::after and ::before pseudo-element code declarations with absolute positioning for tooltips and popovers.
Executes 100% client-side inside your browser JavaScript engine. No graphic files or CSS rules are uploaded to any server.
The classic CSS triangle trick takes advantage of how web browser layout engines render element borders. When an HTML element has zero width and zero height, its borders meet at 45-degree miter angles. By applying thick border widths to opposing sides and setting three of the borders to transparent, the remaining visible colored border forms a crisp triangular arrow. For instance, an Up-pointing triangle uses border-width: 0 (W/2)px Hpx (W/2)px with border-color: transparent transparent [color] transparent.
In modern web design, CSS Level 3 Masking provides an alternative using clip-path: polygon(...). Unlike border tricks, clip-path allows elements to retain actual dimensions while clipping pixel regions outside a defined geometric coordinate path (e.g. polygon(50% 0%, 0% 100%, 100% 100%)). This generator supports both techniques, allowing front-end engineers to choose legacy 100% browser-safe border code or modern vector polygon styling.
Positioning arrows on UI components like popovers, dropdowns, and tooltips requires pseudo-elements (::after or ::before). By assigning position: absolute and placing the pseudo-element at container boundaries (top: 100%, bottom: 100%, left: 50% with transform: translateX(-50%)), the triangle anchors cleanly without requiring extra DOM elements.
transparent and one side to a solid color creates a pure CSS triangle without SVG or images.clip-path: polygon(...) which allows exact geometric vector scaling and responsive percentage-based coordinates.::after or ::before pseudo-element code snippet. Set content: "" and position: absolute, then position the pseudo-element at top: 100%, bottom: 100%, left: 100%, or right: 100% relative to your parent container.