Search code examples
htmlcssclip-path

Is it possible to merge two images in one shape with css?

I have two below images like below.

Image 1

enter image description here

Image 2

enter image description here

I want to merge these two images with css and expect like this below image.

Expected Image

enter image description here

Please help me to set images like this.

I tried with clip-path but got nothing:

div {
  background:url(https://i.sstatic.net/zzeP9.png);
  background-size:contain;
  height:200px;
  clip-path:url(https://i.sstatic.net/PkKi6.png)
}
<div ></div>

Thanks in Advance.

Solution

  • This is what mask is made for:

    img {
  -webkit-mask:url(https://i.ibb.co/sFjJtNN/PkKi6.png) center/contain no-repeat;
  max-width:100%;
}

body {
  background:pink;
}
    <img src="https://i.sstatic.net/zzeP9.png" >