title: Box-shadow around "clipped" corner
body: <p><a href="https://i.stack.imgur.com/EgTfj.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/EgTfj.png" alt="enter image description here"></a></p>
  
  <p>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 </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;nav id="navMultilevel" class="mura-nav-multi-level sideNav zDepth1" role="navigation" aria-label="secondary"&gt;
    &lt;h2&gt;Research&lt;/h2&gt;
    &lt;ul class="nav nav-list"&gt;
      &lt;li class="first"&gt;&lt;a href="/research/office-of-research-support/"&gt;Office of Research Support&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="/research/research-centers-facilities/"&gt;Research Centers &amp;amp; Facilities&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="/research/industry-relations-tech-transfer/"&gt;Industry Relations &amp;amp; Tech Transfer&lt;/a&gt;
      &lt;/li&gt;
      &lt;li class="last"&gt;&lt;a href="/research/adapp-advance/"&gt;ADAPP-Advance&lt;/a&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/nav&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>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?</p>