如何从css中塑造图像

Question

一个棘手的任务分配给我。

我的问题是我有一个乡绅的形象，但我从右侧进入了一点点。

请参阅示例我想要的内容。

我的第一张原始图片 enter image description here

我想从右侧看这种类型的裁剪图像 enter image description here

此图像可以从后端更改，因此我们无法从css设置。

请帮我解决如何从css中裁剪此图片的问题。

谢谢

Answer 1

＆＃13;

＆＃13;

div {
  transform: skewX(-10deg);
  overflow: hidden;
  display: inline-block;
  padding-left: 3%;
  margin-left: -6%;
}

img {
  transform: skewX(10deg) translateX(6%);
}

＆＃13;

<div>
  <img src="https://i.stack.imgur.com/2vEDo.jpg">
</div>

＆＃13;

＆＃13;

＆＃13;