cssmask

Need assistance generating clip path for the attached image

I would like to know how I can generate the required mask for the attached image. I have tried various methods but I am unable to get the rounded corners with the mask per the given image.

Is there an alternative method to create the mask or using clip-path?

enter image description here

Solution

  • You already have the image so use it as a mask:

    img {
  mask: url(https://i.sstatic.net/cWfRcqyg.png) center/contain no-repeat;
}

body {
  background: pink;
}
    <img src="https://picsum.photos/id/114/300/300">

    I would edit the image to make it fully black but it doesn't really matter as long as you have the transparent/non-transparent parts.