Cortar imagen en diagonal con CSS

Solución:

Usa CSS3 -clip-path y polygon como esto. Puede especificar la ruta que desee.

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/

Para algunos bits adicionales, es posible que desee echar un vistazo, por ejemplo, a esto. Además, para obtener más información sobre IE, consulte esto.

Podrías usar un pseudo element, combinado con overflow:hidden;

Resultado

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>

Este está un poco sucio pero … Aquí está la 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>

Nota: Otro método podría ser usar un pseudoelemento para enmascarar la imagen, pero esto no producirá un “corte” real donde debería poder ver a través.

---

---

Utiliza Nuestro Buscador