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

This can also be done using CSS clip-path

div {
  width: 200px;
  height: 150px;
  background: red;
  -webkit-clip-path: polygon(20% 10%, 85% 30%, 100% 100%, 0% 100%);
  clip-path: polygon(20% 10%, 85% 30%, 100% 100%, 0% 100%);
}

<div></div>

You can then just change the background element if you need an image.

div {
  width: 200px;
  height: 150px;
  background: url(https://lorempixel.com/200/150/);
  -webkit-clip-path: polygon(20% 10%, 85% 30%, 100% 100%, 0% 100%);
  clip-path: polygon(20% 10%, 85% 30%, 100% 100%, 0% 100%);
}

<div></div>

In their current state, clip-paths aren't as widely supported as inline or imported SVG but is a much cleaner, and in some cases, easier variant to use.

• Browser Support