围绕“修剪”的盒子阴影角 [英] Box-shadow around "clipped" corner

问题描述

上面的图片是我网站上侧面导航顶部的屏幕截图。我想让nav容器的右上角有一个 clipped，我目前正在使用

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

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

容器。我想在容器周围应用一个盒子阴影，您可以在图像的右侧看到它。问题是阴影跟随导航容器的框而不是修剪的边缘。

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?

推荐答案

我已经改变了将切角生成背景渐变的方式吗？

I have changed the way to generate the cutted corner to a background gradient.

现在，可以使用阴影，这样可以保持角落的透明度

Now, it's possible to use a drop shadow , that will keep the transparency of the corner

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

这篇关于围绕“修剪”的盒子阴影角的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！