cssgeometryclip-pathvinyl

Clip-path inset circle

I have a squared image and want to cut it middle with a circle shape to see what's behind (actually a body background-image). I found clip-path CSS property, but I only arrive to create a circle with the image instead of creating a circle surrounded by my image.

Until now I had a white background, so I just created a ::after element white, with an inset box-shadow but now I got an image for the background so I can't keep that.

Is there a way with or without clip-path to achieve that?

PS: the final goal is to create a music vinyl rotating, so this middle hole is necessary! :)

Thanks.

Solution

  • You can do this using mask and not clip-path

    img {
  border-radius:50%;
  -webkit-mask:radial-gradient(farthest-side,transparent 15%,#fff 16%);
          mask:radial-gradient(farthest-side,transparent 15%,#fff 16%);
}

body {
  background:linear-gradient(to right,gray,yellow);
}
    <img src="https://i.picsum.photos/id/1003/400/400.jpg">