CSS Triangle Generator

The classic method uses transparent borders: set width and height to 0, make all borders transparent, then color one side. For example: border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid #3b82f6. Modern CSS can also use clip-path: polygon().

clip-path: polygon() creates triangles by defining three points: clip-path: polygon(50% 0%, 0% 100%, 100% 100%) makes an upward-pointing triangle. This is more intuitive than the border trick, supports percentage-based sizing, and works with backgrounds, images, and gradients.

Yes — use clip-path: polygon() with percentage values for a triangle that scales with its container. The border method requires fixed pixel values. Alternatively, use an inline SVG with viewBox and percentage width/height for full responsiveness.

Use a ::before or ::after pseudo-element with the border triangle method, positioned absolutely relative to the tooltip. Point it toward the trigger element. Modern alternatives include clip-path on the pseudo-element or the CSS Anchor Positioning API (emerging standard).