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

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.

Answer 2

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);
}

<figure>
  <img src="http://placehold.it/502x260&text=Random+Image" />
</figure>

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.

Answer 3

Just an idea:

HTML

<figure>
    <img src="http://placehold.it/500x500" alt="">
</figure>

CSS

figure {
    position: relative;
    display: inline-block;
    overflow: hidden;
    padding: 0;
    line-height: 0;
}

figure:after {
    content: '';
    position: absolute;
    width: 200%;
    height: 100%;
    left: 0;
    bottom: -91%;
    background: red;
    -webkit-transform: rotate(355deg);
    transform: rotate(355deg);
}

Demo

Try before buy

Answer 4

-You can use http://cssplant.com/clip-path-generator for this.

It's just a "dirty solution", the best way is placing a svg above the img.

Maybe in a future, the "clip css property" would support another kind of shapes than just "rect" and things like this could be done!

Another "dirty way" is putting a div above the img, with the background-color that you want and rotate it!

Answer 5

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);
}

<div></div>