can you make a section of a div transparent and affect its box-shadow

Question

I have managed to make a part of my div transparent by following this example: http://jsfiddle.net/5VDLX/144/

HTML (JSFIDDLE)

<div class="container">
    <div class="shape"></div>
    <div class="circle"></div>
</div>

CSS (JSFIDDLE)

body{
    background: yellow;
}
.shape {
    width: 500px;
    height: 75px;
    background-color: transparent;
    background-image: -webkit-radial-gradient(50% 100%, circle, transparent 50px, black 0);
    background-image: radial-gradient(50% 100%, circle, transparent 50px, black 0);
}
.circle {
    width: 100px;
    height: 100px;
    background-color: transparent;
    border: 2px solid red; /* red for demonstration */
    border-radius: 50px;
    margin: -51px 0 0 199px; /* considering borders */
}

But the div has a box-shadow which i would like to follow the transparent half-circle instead of remaining square.

Can this be achieved? And if so, how?

Answer 1

You can use the drop-shadow filter:

body {
  background: yellow;
}

.shape {
  width: 500px;
  height: 75px;
  background: radial-gradient(circle at 50% 100%, transparent 49px, black 50px);
  filter:drop-shadow(0 0 10px green);
}

<div class="container">
  <div class="shape"></div>
</div>