У меня есть div с примененной к нему маской. Я заметил, что я не могу применить box-shadow
к тому же самому div, поэтому я должен переместить тень на wrapper
div.
Проблема в том, что если тень помещается на div тени, маска не применяется к тени.
Как я могу применить маску к div и его тени?
.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>
Свободный перевод вопроса Applying mask to box-shadow от участника @alexandernst.