Cutting image diagonally with CSS

Question

How to cut away part of an image or container diagonally using CSS?

The part that needs to be cut away has the form of a triangle

To be more specific: if the above picture is the image the blue part should be cut out, not the yellow

The html should be:

<figure>
 <img src="img_pulpit.jpg" alt="The Pulpit Rock">
</figure>

or:

<div class="container">
  content
</div>

There is from my own investigation a lot of ways to do this, but most of them is hacky, so looking for a best approach

Min browser support: IE11, latest webkits etc.

Answer 1

Use CSS3 -clip-path and polygon like this. You can specify whatever path you want to.

img {
  width: 100px;
  height: 100px;
  -webkit-clip-path: polygon(0 0, 0 100px, 100px 80px, 100px 0);
  clip-path: polygon(0 0, 0 100px, 100px 80px, 100px 0);
}

<img src="https://picsum.photos/id/0/100/100">

http://jsfiddle.net/r3p9ph5k/

For some extra bits you might want to take a look at e.g. this. Also, for more information about IE, see this.