如何在 HTML 和 CSS 中剪切这样的图像 [重复]答案

【问题标题】：How cut image like this in HTML & CSS [duplicate]如何在 HTML 和 CSS 中剪切这样的图像 [重复]
【发布时间】：2021-10-06 19:08:01
【问题描述】：

我想知道如何剪切图像以放在文本旁边，例如：

【问题讨论】：

我们希望您在 SO 或 google 上进行了一些搜索.....请告诉我们minimal reproducible example

标签： html css

【解决方案1】：

这太容易了。您唯一需要知道的是clip-path 属性。

Click here 访问 MDN 页面。

img {
    clip-path: polygon(25% 0, 100% 0, 100% 100%, 0% 100%);
}

您可以使用此代码。

例子：

img {
  clip-path: polygon(25% 0, 100% 0, 100% 100%, 0% 100%);
}

&lt;img src="https://images.unsplash.com/photo-1614102073832-030967418971?ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8bGFuZCUyMHNjYXBlfGVufDB8fDB8fA%3D%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60"&gt;

另外，Click Here 查看clip-path 生成器。

【讨论】：

【解决方案2】：

你可以用clip-path做到这一点

img {
clip-path: polygon(31% 0, 100% 0, 100% 100%, 0% 100%);
}

&lt;img src="https://picsum.photos/id/1/500/300"/&gt;

有一个工具可以使用Click Me

【讨论】：