Clip-path

by Simon Hi

HTML

<div>
  <img title="Le reste" src="https://forum.alsacreations.com/upload/1642682785-84086-avocatsmall.png">
  <img title="Noyau" src="https://forum.alsacreations.com/upload/1642682785-84086-avocatsmall.png">
  <div></div>
</div>

CSS

div {
  position: relative;
}

img {
  position: absolute;
  width: 300px;
  height: 322px;
}

img:nth-of-type(1) {
  clip-path: rect(0 0 300 322);
}

img:nth-of-type(2),
div>div {
  clip-path: path('M 183,100 C 180,101 177,103 175,105 171,108 169,113 166,117 164,122 162,126 160,131 158,134 157,137 156,141 155,146 155,151 155,156 154,159 153,163 154,166 155,170 159,173 161,176 164,179 166,181 169,183 172,186 176,186 179,188 183,191 186,194 189,196 192,197 195,197 198,198 202,198 206,198 209,197 213,195 217,192 220,189 222,186 224,182 226,178 228,173 228,167 228,161 228,156 227,151 225,146 224,142 223,139 221,136 220,132 218,129 217,126 215,123 213,121 211,118 209,116 207,113 205,111 203,109 200,108 198,106 195,104 193,102 190,101 189,100 188,100 187,100 186,100 184,99 183,100 Z');
}

div>div {
  width: 300px;
  height: 322px;
  background: #f007;
  pointer-events: none;
}