How to create an irregular shape for images using css?

Question

Is it possible to create an irregular shape for images with CSS like in this url? As a starter point I made this but I do not manage to make more irregularities appear on each side of the image, as in the example url mentioned above:

.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%);
}

Basically, I want it to look like this

Yes you can clip things, but I'm not sure what your actual question is - are you seeing a problem with the clip-path you have used? Please describe what you want to see versus what you actually see and make a snippet so we can see your structure. See https://stackoverflow.com/help/minimal-reproducible-example for help with this. — A Haworth, Apr 12 '22 at 07:22
@AHaworth I do not manage to make more irregularities appear on each side of the image, as in the example url mentioned above. — Liviu, Apr 12 '22 at 09:08

score 0 · Answer 1 · answered Apr 12 '22 at 07:33

I have used your clip path on an image and it seems fine.

My question though is whether you did indeed intend 'div' to be a class or were you actually trying to select a div element? (ie was there a misplaced dot?).

This snippet assumes you are wanting to select a div with an img in it:

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>

Sergiu · Accepted Answer · 2022-04-12T10:36:27.537

To create any shape there is a css clip path generator.

Example web-site:

Example code:

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>

I found a better tool, even there is no curve on shapes: https://www.uplabs.com/posts/clip-path-generator — Liviu, Apr 12 '22 at 10:34

How to create an irregular shape for images using css?

2 Answers2