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

You could use a pseudo element, combined with overflow:hidden;

Result

div {
  height: 300px;
  width: 300px;
  position: relative;
  overflow: hidden;
  background: url(http://placekitten.com/g/300/300);
}
div:after {
  content: "";
  position: absolute;
  top: 93%;
  left: 0;
  height: 100%;
  width: 150%;
  background: red;
  -webkit-transform: rotate(-5deg);
  -moz-transform: rotate(-5deg);
  transform: rotate(-5deg);
}