About the CSS Triangle Generator
CSS triangles are built with a clever border trick: an element with zero width and height, where three borders are transparent and one is colored, displays as a triangle. The CSS Triangle Generator calculates those border values for you in any of eight directions.
Pure CSS triangles are lightweight and crisp on all screens, making them ideal for tooltip pointers, speech bubbles, dropdown carets, breadcrumb arrows, ribbons and decorative corners. Set the width, height and color, preview the result and copy the ready-to-use code.
How to use the CSS Triangle Generator
- Choose the direction the triangle should point.
- Set the width and height with the sliders.
- Pick a color.
- Copy the CSS into your stylesheet, usually on a ::before or ::after pseudo-element.
Frequently asked questions
How do I add a triangle to a tooltip?
Apply the generated CSS to a ::after pseudo-element with content: "" and position it absolutely at the edge of the tooltip.
Can CSS triangles have borders or shadows?
Not directly. For outlined triangles, stack two triangles of different sizes, or use clip-path for more complex shapes.
Is clip-path better than the border trick?
clip-path is more flexible, but the border technique works everywhere and is perfect for small arrows.