Question

如何使用css绘制具有如此负半径的div，而我的问题的主要观点是如何在此圆形区域使用阴影？我尝试使用:: before，:: after之后的一些hacks，它使用负半径，但是当我尝试对这个元素使用阴影时，它看起来不正确，因为这个div的所有方块都开始可见。

enter image description here

＆＃13;

.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;
}

＆＃13;

<div class="side-menu__corner">
</div>

＆＃13;

Answer 1

您可以使用带有径向渐变的阴影滤镜，如下所示：

＆＃13;

.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);
}

＆＃13;

<div class="box">

</div>

＆＃13;

使用div以negaitve radius

1 个答案: