How to Draw CSS Shapes

The CSS Code snippet below each shape is editable.You can play around with sizes and colours to see the effect on shape.

Numbers in [ ] in description indicate the shape number that was used to construct the shape.

1.Square

2.Rectangle

3.Circle

4.Ellipse

5.Semi-Circle Up

6.Semi-Circle Down

7.Semi-Circle Right

8.Semi-Circle Left

9.Triangle Up

10.Triangle Down

11.Triangle Right

12.Triangle Left

13.Trapezium

14.Parallelogram

15.Capsule

16.Leaf

17.Triangle Top Left

18.Triangle Top Right

19.Triangle Bottom Left

20.Triangle Bottom Right

21.Rhombus

Rhombus shape can be created by simplying rotating the square[1].
Other Method:Join Triangle Up[9] and Triangle Down[10].

22.Heart I

The Heart shape is created by joining two semi-circle up[5] on the top of a rhombus[21].

23.Heart II

The Heart shape is created by joining two semi-circle up[5] on the top of a Triangle Down[10].

24.Drop

The Drop shape is created by joining a Triangle Up[9] on the top of a Circle[3].

25.Star I

This Star shape is created by joining a Triangle up [9] and a Triangle Down[10].

26.Star II

This star shape is created by joining three rectangles[2] each rotated at a particular angle.

27.Star III

This Star shape is created by three Triangle down[10] rotated at a particular angle.

28.Diamond

The Diamond shape is created by joining a Trapezium[13] on the top of a Triangle Down[10].

29.Pentagon

The Pentagon shape is created by joining a Triangle Up[9] on top a Trapezium[13].

30.Hexagon

The Hexagon shape is created by joining two Trapezium[13] one of which is inverted.

31.Cloud

The Cloud shape is created by joining two Circles[3] on the top of a Capsule[15].

32.Moon

The Moon shape is created by making the circle[3] transparent and using box shadow of that circle.

drawing shapes