css - 使用 css 转换裁剪图像

Question

如果有人问我的问题，我深表歉意，但我正在寻求旋转图像并将其裁剪为用户选择的尺寸。例如，假设他们可以选择 2 厘米 x 2 厘米或 4 厘米 x 4 厘米。然后我使用 css 裁剪来获得正确的大小。我的同事给我看这个，但现在他去度假了。

.avatar {
  clip-path: inset(20px 20px 20px 20px);
}

现在我希望允许一些更有趣的东西，例如旋转图像为个人资料头像旋转，以便图像像钻石一样被剪裁。

这是 transform css 的用途吗？我看到变换、动画、旋转并且不擅长使用 css。感谢您的帮助。

Answer 1

我认为您不想在这里使用 transform: rotate(); 或类似的方法，因为图像会倾斜到一边。我会坚持使用 clip-path 但使用 polygon 而不是 inset。

.avatar {
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

<img class="avatar" src="https://via.placeholder.com/100x100">

这是使用clip-path: inset() 和transform: rotate();

问题的演示

.avatar {
  clip-path: inset( 20px );
  transform: rotate( -45deg );
}

<img class="avatar" src="https://via.placeholder.com/100x100">