So I have a header that is shown in the snippet below.

My problem is I only want the shadow around the `a` tag to show on the part that has expanded out of its container `div`, to create the impression that the white edge is all one element.

Basically I only want the shadow on the left and on the right to go from the bottom of the `a` element to the bottom of the `div`. While also showing on the bottom of the `a` element.

Screenshot of what I'm after in case my descriptive capabilities are not functioning:

[![enter image description here](https://i.stack.imgur.com/8CYTP.png)](https://i.stack.imgur.com/8CYTP.png)

I've tried playing with `z-index` but haven't been able to get it to work.

My thought with `z-index` was to push the `a` behind the `div`, then pull the `img` in front of all.

I would prefer a CSS-only solution, as I don't want to have to modify the html, but if I have to I have to.

```css
* {
  padding: 0;
  margin: 0;
}

div {
  height: 50px;
  width: 100%;
  background: white;
  box-shadow: 0px 0px 5px #000000;
}

a {
  display: inline-block;
  margin-left: 30px;
  padding: 10px;
  height: 60px;
  background: white;
  box-shadow: 0px 0px 5px #000000;
}

img {
  height: 100%;
}
```

```html
<div>
  <a href="#">
    <img src="https://via.placeholder.com/200x100">
  </a>
</div>
```