CODEWITHSUNDEEP
cssbox-shadowcornerradius
200OK
200OK

Reputation: 792

Make shadow looks correct with div with negaitve radius

How to draw a div with such negative radius like at the image using css and the main point of my question is how to make it possible to use shaddow at this round area? I've tried to use some hacks with ::before,::after elements and it works with negative radius but when I tried to use shadow to this element it looks incorrect because all squares of this div started to be visible.

enter image description here

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

Upvotes: 1

Views: 43

Answers (1)

Temani Afif
Temani Afif

Reputation: 273649

You can use drop-shadow filter with radial-gradient like this:

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

Upvotes: 2

Related Questions