html - "clipped" Angular 周围的框阴影

Question

上图是我网站侧边导航顶部的截图。我希望导航容器有一个“剪裁”的右上角，我目前正在用

.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;
}

<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>

在导航容器上。我想在容器周围应用一个盒子阴影，您可以在图像的右侧看到它。问题是阴影跟随导航容器的“框”，而不是剪裁的边缘。有没有什么方法可以仅使用 CSS 来实现这一点？

Answer 1

我已经将切 Angular 的生成方式更改为背景渐变。

现在，可以使用投影，这将保持 Angular 落的透明度

.sideNav {
  background-image: linear-gradient(225deg, transparent 70px, rgba(24, 69, 59, .8) 70px);
  color: #FFF;
  padding: 10px;
  position: relative;
  filter: drop-shadow(0px 0px 10px red);
}

<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>