如何实现图片从左下角到顶部的skew（倾斜）效果？

我想要实现如下的图片倾斜（skew）效果，但目前得到的是相反的效果，试了多种skew设置都没搞定。预期效果如下：

当前代码 #

CSS

.box {
  display: inline-block;
  border-radius: 25px;
  overflow: hidden;
  float: right;
}

.box div {
  border-radius: inherit;
  transform-origin: top;
  transform: skew(20deg);
  overflow: hidden;
}

.box div img {
  display: block;
  transform-origin: inherit;
  transform: skew(-20deg);
}

HTML

<div class="box">
  <div>
    <img src="https://fastly.picsum.photos/id/1069/300/200.jpg?hmac=senkn1L_edHHUsRFhKqx15UOq2Ci-2656EDeaRgumNw">
  </div>
</div>

解决方案 #

问题出在倾斜角度方向和变换原点的设置上，调整后即可实现预期效果：

• 将外层容器的倾斜角度改为负数值，内层图片的倾斜角度改为正数值，抵消外层倾斜的同时让容器呈现反向倾斜
• 把变换原点设置为右下角，确保倾斜基准点符合预期

修改后的CSS代码：

.box {
  display: inline-block;
  border-radius: 25px;
  overflow: hidden;
  float: right;
}

.box div {
  border-radius: inherit;
  transform-origin: bottom right;
  transform: skew(-20deg);
  overflow: hidden;
}

.box div img {
  display: block;
  transform-origin: inherit;
  transform: skew(20deg);
}

调整后，容器会呈现左高右低的倾斜效果，图片保持正常比例无扭曲。

内容的提问来源于stack exchange，提问作者Elaine Byene