如何使用 css 为图像创建不规则形状？

Question

是否可以像 url 中那样为具有 CSS 的图像创建不规则形状？作为起点，我做了这个，但我没有设法在图像的每一侧出现更多的不规则，如上面提到的示例 url：

.div img {
clip-path: polygon(0% 0%, 16% 2%, 39% 0%, 83% 4%, 100% 0%, 100% 24%, 98% 48%, 100% 75%, 100% 100%, 75% 97%, 45% 100%, 1% 100%, 7% 81%, 0% 56%);
}

基本上，我希望它看起来像 like this

Answer 1

我在一张图片上使用了你的剪辑路径，看起来不错。

但我的问题是，您是否确实打算 'div' 成为 class，或者您实际上是在尝试 select 成为 div 元素？（即是否有错位的点？）。

此代码段假定您想要 select 带有 img 的 div：

div img {
  clip-path: polygon(0% 0%, 16% 2%, 39% 0%, 83% 4%, 100% 0%, 100% 24%, 98% 48%, 100% 75%, 100% 100%, 75% 97%, 45% 100%, 1% 100%, 7% 81%, 0% 56%);
}

<div>
  <img src='https://picsum.photos/id/1015/200/300'>
</div>

Answer 2

要创建任何形状，有一个 css 剪辑路径生成器。

示例web-site：

示例代码：

img { 
 -webkit-clip-path: polygon(50% 0%, 80% 10%, 100% 35%, 100% 70%, 80% 90%, 50% 100%, 20% 90%, 0% 70%, 0% 35%, 20% 10%);
clip-path: polygon(50% 0%, 80% 10%, 100% 35%, 100% 70%, 80% 90%, 50% 100%, 20% 90%, 0% 70%, 0% 35%, 20% 10%);
}

<img src="https://thumbs.dreamstime.com/b/d-wallpaper-textere-white-chamomiles-abstract-canvas-textures-d-wallpaper-textere-white-chamomiles-abstract-canvas-textures-160056709.jpg" alt="">

div {
  background-image: url("https://thumbs.dreamstime.com/b/d-wallpaper-textere-white-chamomiles-abstract-canvas-textures-d-wallpaper-textere-white-chamomiles-abstract-canvas-textures-160056709.jpg");
  width: 50%;
  height: 350px;
-webkit-clip-path: polygon(23% 43%, 7% 31%, 5% 68%, 15% 85%, 51% 61%, 75% 83%, 86% 49%, 83% 19%, 60% 37%, 58% 19%, 45% 40%, 37% 28%);
clip-path: polygon(23% 43%, 7% 31%, 5% 68%, 15% 85%, 51% 61%, 75% 83%, 86% 49%, 83% 19%, 60% 37%, 58% 19%, 45% 40%, 37% 28%);
}

<div></div>

div {
  background-image: url("https://thumbs.dreamstime.com/b/d-wallpaper-textere-white-chamomiles-abstract-canvas-textures-d-wallpaper-textere-white-chamomiles-abstract-canvas-textures-160056709.jpg");
  width: 50%;
  height: 350px;
 -webkit-clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 44% 100%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 44% 100%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
}

<div></div>

如何使用 css 为图像创建不规则形状？

How to create an irregular shape for images using css?

css

polygon

css-shapes

clip-path