Skewing image without distorting it

Question

Can i do this effect on an image without distorting it? i tried the skew effect using css but it rotates the image somehow and crops half of it, i want it to stay as it is in it's position with the same size and everything but with the edges like the image attached, and here is my code:

div.skewed {
  position: relative;
  height: 140px;
  transform: skew(-2deg) rotate(2deg);
  -webkit-transform: skew(-2deg) rotate(2deg);
  -moz-transform: skew(-2deg) rotate(2deg);
  overflow: hidden;
}

div.skewed > * {
  width: 110%;
  position: absolute;
  top: 50%;
  transform: skew(2deg) rotate(-2deg) translateY(-50%);
  -webkit-transform: skew(2deg) rotate(-2deg) translateY(-50%);
  -moz-transform: skew(2deg) rotate(-2deg) translateY(-50%);
}

<div class="skewed">
  <img src="https://www.todaysparent.com/wp-content/uploads/2013/04/sleeping-baby-article.jpg">
</div>

Answer 1

You can use clip-path to crop an image without distorting it. With the polygon function you can specify a custom shape by providing a list of x,y coordinates of the single corners. It is even responsive if you use a relative unit like %.

img {
  width: 25%; /* for demonstration purposes */
  clip-path: polygon(0 0, 60% 0, 100% 30%, 100% 100%, 0 70%);
}

<img src="https://www.todaysparent.com/wp-content/uploads/2013/04/sleeping-baby-article.jpg">

The good

• A minimum of code required (only 1 simple CSS rule)
• Transparency is kept (you can set any background)
• Responsive (you can easily scale the image)

The not so good

• Browser compatibility

Answer 2

You can use the image as background and rely on gradient to hide some of it. You will have better support than clip-path but no transparency:

div.skewed {
  height: 200px;
  width:200px;
  background:
   linear-gradient(to bottom left,transparent 49%,#fff 50.5%) bottom/100% 25% no-repeat,
   linear-gradient(to bottom left,#fff 50%,transparent 50.5%) top right/40% 40% no-repeat,
   url(https://www.todaysparent.com/wp-content/uploads/2013/04/sleeping-baby-article.jpg) center/cover;
   
   display:inline-block;
   vertical-align:top;
}

<div class="skewed">

</div>
<div class="skewed" style="width:150px;height:150px;">

</div>