1

How can I cut a hole in multiple divs to the body background?

Using clip paths (Clip path inset circle?) you can cut a hole in a div, potentially animated.

But is there a way to cut through multiple divs, to either the body background, or a nominated parent div?

It would be theoretically possible to use javascript, to copy a clip-path to the parent, however it would need to be adjusted, and I could see animation being a potential issue.

Ryan Leach
  • 4,262
  • 5
  • 34
  • 71
  • 1
    Won't a `clip-path` on the parent div also clip its children? So you can just add a wrapper div as a common parent to everything that needs to be clipped, and add the clip path to that wrapper. – Thomas May 31 '20 at 12:05
  • 1
    can show us a screenshot or an illustration of what are you trying to achieve? – Temani Afif May 31 '20 at 12:43
  • @Thomas wow... ok, that's probably the best way to do it. – Ryan Leach May 31 '20 at 13:20

1 Answers1

2

If you are using the radial-gradient trick, you can just stack the holes on top of each other.

Fiddle: https://jsfiddle.net/nh3reLg1/2/

Tritonal
  • 607
  • 4
  • 16