html - How to create a div with an irregular shape?

Question

Is it possible to create a div with an irregular shape with CSS? I already searched but I can't find a good example. The style is something like this:

              /
             /                     
            /                       
           /                         
          /___________________________    

There should be a line on the top that connects it. Basically it has different height on the left and right side.

Answer 1

THE SVG WAY

Since the shape you request is not possible with only CSS, I suggest you use SVG to draw the shape.

The following piece of code will create the below shape:

<svg height="150" width="150">
    <polygon points="20,10 100,30 120,100 0,100" style="fill:red;" />
</svg>