Use a shape as a hole in another shape

Question

I wanted to know if there was a way I could use the white shape in my code called #mask like a mask, to show a hole in the black retangle. Actually, I would like to be able to use it as an index when you scroll, so it dynamically reajusts.

I wouldn't like to use a .png image to achieve that because I would like to be able to dynamically change the shape after.

I know there is the mask filter in css but I couldn't think of a way to adjust it dynamically with my content (that could be different images or even texts)

Thanks for the help.

#black{
  z-index:100;
  position: fixed;
  width:50vw;
  height: 45vh;
  background-color: black;
  top: 25vh;
  left: 45vw;
}
#mask{
  border-radius: 100px;
  z-index:101;
  position: relative;
  top: 2vh;
  left: 5vw;
  width: 30vw;
  height: 30vh;
  background-color: white;
}

img{
    z-index:0;
    width:100vw;
  height: auto;
}

<body>
<div id="black">
  <div id="mask">
  </div>
</div>

<img src="https://i.imgur.com/ONJQpdL.jpg">
<img src="https://i.imgur.com/eVo569U.jpg">

</body>

You mean you want a hole in your black div that show the background image? What do you mean by "that could be different images or even texts" does it refer to the white circle or to the background or something else? — Kaiido, Dec 03 '20 at 08:29
actually, yeah, I want the white shape to be a hole in the black rectangle! — Aurore, Dec 03 '20 at 09:35

Temani Afif · Accepted Answer · 2020-12-03T10:53:06.970

In the future you can easily do this using element() combined with mask:

The element() function allows an author to use an element in the document as an image. As the referenced element changes appearance, the image changes as well. ^ref

Here is an example that work only in Firefox:

#black {
  z-index: 100;
  position: fixed;
  width: 50vw;
  height: 45vh;
  background-color: black;
  top: 25vh;
  left: 45vw;
  /* this will do the magic */
  -webkit-mask:
    -moz-element(#mask) 5vw 2vh no-repeat,
    linear-gradient(#fff 0 0);
  mask-composite:exclude;
  /**/
}

#mask {
  border-radius: 100px;
  width: 30vw;
  height: 30vh;
  background-color: white;
}

img {
  z-index: 0;
  width: 100vw;
  height: auto;
}

<div id="black">
</div>

<img src="https://i.imgur.com/ONJQpdL.jpg">
<img src="https://i.imgur.com/eVo569U.jpg">


<div style="height:0;overflow:hidden">
<div id="mask">
</div>
</div>

Your #mask can be any kind of element and adjusted dynamically. Check this answer to see different effect using the same technique: https://stackoverflow.com/a/65060090/8620333

In the meanwhile, you can approximte your mask effect differently until the support element() is better:

#black {
  z-index: 100;
  position: fixed;
  width: 50vw;
  height: 45vh;
  top: 25vh;
  left: 45vw;
  overflow:hidden;
}
#black:before {
  content:"";
  position:absolute;
  z-index:0;
  border-radius: 100px;
  box-shadow:0 0 0 100vmax black;
  width: 30vw;
  height: 30vh;
  left:5vw;
  top:2vh;
}

img {
  z-index: 0;
  width: 100vw;
  height: auto;
}

<div id="black">
</div>

<img src="https://i.imgur.com/ONJQpdL.jpg">
<img src="https://i.imgur.com/eVo569U.jpg">

@pual another answer with more exmples if you are intrested: https://stackoverflow.com/a/65060090/8620333 — Temani Afif, Dec 03 '20 at 11:05

Use a shape as a hole in another shape

1 Answers1