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

The above image is a screenshot of the top of a side navigation on my site. I would like for the nav container to have a "clipped" top right corner, which I am currently achieving with 

```css
.sideNav {
  background: rgba(24, 69, 59, .8);
  color: #FFF;
  padding: 10px;
  position: relative;
}
.sideNav:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  border-width: 40px 0px 0px 40px;
  border-style: solid;
  border-color: #fff #fff transparent transparent;
  background-clip: content-box;
}
```

```html
<nav id="navMultilevel" class="mura-nav-multi-level sideNav zDepth1" role="navigation" aria-label="secondary">
  <h2>Research</h2>
  <ul class="nav nav-list">
    <li class="first"><a href="/research/office-of-research-support/">Office of Research Support</a>
    </li>
    <li><a href="/research/research-centers-facilities/">Research Centers &amp; Facilities</a>
    </li>
    <li><a href="/research/industry-relations-tech-transfer/">Industry Relations &amp; Tech Transfer</a>
    </li>
    <li class="last"><a href="/research/adapp-advance/">ADAPP-Advance</a>
    </li>
  </ul>
</nav>
```

on the nav container. I would like to have a box-shadow applied around the container, which you can see on the right side of the image. The problem is that the shadow follows the "box" of the nav container, and not the clipped edge. Is there any way to accomplish this with just CSS?