Search code examples
htmlcsscss-shapes

Box-shadow around "clipped" corner

enter image description here

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?

Solution

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