使用 Transform 按原样显示图像

时间：2021-06-27 15:31:27

标签： html css transform skew

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

enter image description here

enter image description here

1 个答案:

答案 0 :(得分：0)

要剪辑照片，您应该使用 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>

相关问题
最新问题