Demo:

Drawing triangles with CSS

Please note: this demo page is to go along with the post Drawing triangles with CSS, so please use that for reference.

How it's done

Borders on every side

Four triangles pointing inwards example.

No top border, transparent left and right borders and green bottom border

Upwards pointing example triangle.

Isosceles triangles

Upward pointing isosceles

This is an isosceles triangle pointing upwards.

Downward pointing isosceles

This is an isosceles triangle pointing downwards.

Left pointing isosceles

This is an isosceles triangle pointing to the left.

Right pointing isosceles

This is an isosceles triangle pointing to the right.

Narrower isosceles

This is a narrow isosceles triangle.

Wider isosceles

This is a wide isosceles triangle.

Equilateral triangle

This is an equilateral triangle.

Scalene/acute angle triangle

This is a scalene/acute angle triangle.

Right angle triangle

This is a right angle triangle.

Obtuse angle triangle

This is a obtuse angle triangle.