Сделайте тень правильной с помощью div с отрицательным радиусом

Как нарисовать div с таким отрицательным радиусом, как на изображении, используя css, и основной вопрос моего вопроса - как сделать возможным использование тени в этой круглой области? Я пытался использовать некоторые хаки с элементами ::before,::after, и это работает с отрицательным радиусом, но когда я попытался использовать тень для этого элемента, это выглядит неправильно, потому что все квадраты этого div стали видны.

введите здесь описание изображения

.side-menu__corner {
  width: 12px;
  height: 12px;
  background: blue;
  position: relative;
  overflow: hidden;

}

.side-menu__corner:before {
  content: "";
  display: block;
  background: white;
  position: absolute;
  bottom: -9px;
  left: -9px;
  width: 20px;
  height: 20px;
  border-radius: 20px;
}
<div class="side-menu__corner">
</div>


cornerradius css box-shadow
person 200OK    schedule 10.04.2018    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Вы можете использовать фильтр тени с радиальным градиентом следующим образом:

.box {
   width:200px;
   height:200px;
   margin:50px;
   background:radial-gradient(circle at bottom left,transparent 70%,blue 71%);
   filter:drop-shadow(0px 0px 11px #000);
}
<div class="box">

</div>

person Temani Afif    schedule 10.04.2018