Cutting image diagonally with CSS

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.


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

Result

enter image description here

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>

Tags:

Html

Css

Css Shapes

Recent Posts