使用 Transform 显示图像

Question

如何使用CSS中的变换来显示像第二张图那样的图像？对于第一张图片，我使用了 skewY，但这不是我想要的图像显示方式。

Answer 1

要剪辑照片，您应该使用 CSS 属性 clip-path。

clip-path: polygon(0% 0%, 100% 0, 100% 69%, 0 100%);

您可以使用 Clippy 创建自己的形状。

<html>
  <body>
     <img style="clip-path: polygon(0% 0%, 100% 0, 100% 69%, 0 100%);" src="https://images.unsplash.com/photo-1612714506270-cf18a3ccb674?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80" width="40%" height="40%">
  </body>
</html>

使用 Transform 显示图像

Display image as it is with Transform

html

css

transform

skew