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.

Answer 2

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>

Answer 3

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 4

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 5

-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!