Question 1

How do you make a triangle in CSS?

Accepted Answer

CSS triangles are made using the border trick. Set width and height to 0, then set the border color and width. The visible side of the triangle is the opposite of the transparent border.

Question 2

Can I make a triangle pointing in any direction?

Accepted Answer

Yes. This generator supports all four directions — up, down, left and right — plus corner triangles. You can also pick a custom color and size.

Question 3

Where can I use CSS triangles?

Accepted Answer

CSS triangles are commonly used in tooltips, callouts, dropdown indicators, breadcrumbs, speech bubbles, decorative banners, breadcrumbs and arrow icons.

Question 4

Are the triangles responsive and pixel-perfect?

Accepted Answer

Yes. CSS triangles scale perfectly on all screen sizes since they are made with border widths (no images). They are pixel-perfect at any zoom level.