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

Answer 1

This one is a little bit dirty but... Here is the idea :

HTML:

body {
  background: #eee;
}
figure {
  display: inline-block;
  overflow: hidden;
  padding-left: 20px;
  margin-left: -20px;
  padding-top: 50px;
  margin-top: -50px;
  padding-right: 20px;
  margin-right: -20px;
  height: 200px;
  transform: rotate(-10deg);
}
figure img {
  transform: rotate(10deg);
}

Note: Another method could be using a pseudo-element to mask the picture, but this will not produce a real "cut" where you should be able to see through.