How can I make a div with irregular shapes with CSS3 and HTM5?

With CSS3, you can always create shapes like rectangle, triangle, etc.

Let us see how −

The following is a rectangle −

#shape1 {
   width: 300px;
   height: 150px;
   background: blue;
}

The following is a triangle −

#shape2 {
   width: 0;
   height: 0;
   border-left: 200px solid transparent;
   border-bottom: 200px solid blue;
}