Create bulge effect ontop of a div

Question

I am trying to create the bellow bulge effect in my container.
Note how the drop shadow is only around the container edges.
This is what i have so far: https://jsfiddle.net/w1gd825m/2/

body{
  background: #fff;
}
.container{
  width: 70%;
  height:100px;
  display: flex;
  box-shadow: 0px -1px 4px 0px #8a8a8a;
  justify-content:space-between;
  margin-top:100px;
  padding:10px;
  border-top-left-radius: 50px;
  border-top-right-radius: 50px;
}

.selected{
  box-shadow: 0px -1px 4px 0px #8a8a8a;
  border-radius:150px;
  position: relative;
  top: -40px;
  background:#fff;
}

.container > *{
    width:80px;
  height:80px;
  text-align:center;
  padding:10px;
}

img{
  width:50%;
  border-radius:150px;
  border: 5px solid #39B54A;
  padding:10px;
}


<div class="container">
  <div>
  <img src="https://www.flaticon.com/svg/vstatic/svg/3917/3917546.svg?token=exp=1650082988~hmac=d9ff2891e27655585214ceac58641abb" />
  </div>
  <div class="selected">
    <img src="https://www.flaticon.com/svg/vstatic/svg/3917/3917546.svg?token=exp=1650082988~hmac=d9ff2891e27655585214ceac58641abb" />
  </div>
  <div>
  <img src="https://www.flaticon.com/svg/vstatic/svg/3917/3917546.svg?token=exp=1650082988~hmac=d9ff2891e27655585214ceac58641abb" />
  </div>
</div>

Thanks

Answer 1

Your .selected div is a full circle. You can't really make a partial circle easily. You can try hiding the lower portion of the circle behind the .container.

You may need to set a background-color:#fff; on the .container and .selected so we can't see through it.

Then on .selected you can try to make a ::after element to hold the drop shadow and use z-index to position it behind the container.

.selected{
  border-radius:150px;
  position: relative;
  top: -40px;
  background:#fff;
}

.selected::after{
    box-shadow: -1px 0px 6px 0px #8a8a8a;
    content: "";
    border-radius: 150px;
    display: block;
    width: 103%;
    height: 103%;
    position: relative;
    top: -62px;
    z-index: -1;
}

You can see the general idea here, but you'll have to play with things a bit if you want a perfectly connecting shadow: https://jsfiddle.net/benxmg49/

Here's a screenshot of the jsfiddle: