2

У меня есть 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.

1

1 ответ 1

2

Вам нужна drop-shadow, а не тень 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>

Свободный перевод ответа от участника @Temani Afif.

0

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.