How do CSS triangles work without an image?

Setting three borders transparent and one colored on a zero-size element creates a visible triangle from the border edge.

Can I make diagonal triangles?

Yes. Diagonal triangles are created by sizing opposite transparent borders asymmetrically.

Yes. An outlined mode uses two overlapping elements with slightly different sizes for a bordered triangle.

clip-path is more flexible and readable for modern browsers. The border trick has broader legacy browser support.

Choose direction and size to get the CSS border code for a pure CSS triangle.

demo

CSS Output