Applying mask to box-shadow - html

Question

I have a div with a mask applied to it. I noticed that I can't apply a box-shadow on that same div, so I must move the shadow to a "wrapper" div.
The problem is that if the shadow is placed on the shadow div, the mask is not applied to the shadow.
How can I apply a mask to a div and to it's shadow?
.wrapper {
width: 200px;
height: 200px;
box-shadow: 17px 13px 7px 3px rgba(0,0,0,0.75);
}
.b {
width: 200px;
height: 200px;
background-color: yellow;
border: 2px solid black;
-webkit-mask: radial-gradient(
circle at center top,
transparent 30px,
black 31px
) top / 100% 51%,
radial-gradient(
circle at right bottom,
transparent 30px,
black 31px
) right bottom / 51% 51%,
radial-gradient(
circle at left bottom,
transparent 30px,
black 31px
) left bottom / 51% 51%;
-webkit-mask-repeat: no-repeat;
}
<div class="wrapper">
<div class="b"></div>
</div>

Answer 1

You need a drop-shadow, not a box-shadow:
.wrapper {
width: 200px;
height: 200px;
filter:drop-shadow(17px 13px 7px rgba(0,0,0,0.75));
}
.b {
width: 200px;
height: 200px;
background-color: yellow;
border: 2px solid black;
-webkit-mask: radial-gradient(
circle at center top,
transparent 30px,
black 31px
) top / 100% 51%,
radial-gradient(
circle at right bottom,
transparent 30px,
black 31px
) right bottom / 51% 51%,
radial-gradient(
circle at left bottom,
transparent 30px,
black 31px
) left bottom / 51% 51%;
-webkit-mask-repeat: no-repeat;
}
<div class="wrapper">
<div class="b"></div>
</div>