"clipped" 角周围的框阴影

Question

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

实现

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

在导航容器上。我想在容器周围应用一个盒子阴影，您可以在图像的右侧看到它。问题是阴影跟随导航容器的 "box"，而不是剪裁的边缘。有什么方法可以只用 CSS 来完成这个吗？

Answer 1

你可以尝试多次box-shadow，用线性渐变绘制对角线和背景。这是平均值，结果会因阴影和 body 背景使用的颜色而异。

.sideNav {
  background:linear-gradient(225deg,transparent 25px,gray 30px, rgba(24, 69, 59, .8) 30px);
  color: #FFF;
  padding: 10px;
  position: relative;
  margin:1em;
  box-shadow: 
    -3px 3px 3px  #000,
    21px 21px 3px  -20px black,
    -21px -22px 3px -20px black
}

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

Answer 2

您需要为此使用 svg 元素和 filters。例如，滚动到该页面中的“15.2. 示例”部分。

请注意，在大多数情况下，您的问题可能被认为是 this question 的重复，因为达到预期效果的最准确方法是使用 <svg> 放置阴影.

人们可能会想到使用 clip-path CSS 属性可能有效，但它只能用于 inset box-shadows，而不是一开始，因为 box-shadow 也会被蒙版剪裁。

我不是 <svg> 过滤器方面的专家，但这是我的最佳尝试：

.section-title {
  width: 390px;
  height: 97px;
  color: white;
  font-size: 30px;
  font-family: sans-serif;
  padding: 0 35px;
  box-sizing: border-box;
  line-height: 97px;
  background: url('data:image/svg+xml,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="390px" height="97px" viewBox="0 0 390 97" enable-background="new 0 0 390 97" xml:space="preserve"><defs><filter id="f2" x="0" y="0" width="200%" height="200%"><feOffset result="offOut" in="SourceGraphic" dx="0" dy="1" stdDeviation="10" /><feGaussianBlur result="blurOut" in="offOut" stdDeviation="3" /><feBlend in="SourceGraphic" in2="blurOut" mode="normal" /></filter></defs><g><path fill-rule="evenodd" clip-rule="evenodd" fill="#41625A" d="M20,20h310l40,40v17H20V-20z" filter="url(#f2)"/></g></svg>') no-repeat 50% 50% /contain;
}

<div class="section-title">Research</div>

要仔细查看 <svg> 本身，这里是：

<svg version="1.1"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     x="0px" y="0px" width="390px" height="97px"
     viewBox="0 0 390 97"
     enable-background="new 0 0 390 97"
     xml:space="preserve"
>
 <defs>
  <filter id="f2" x="0" y="0" width="200%" height="200%">
   <feOffset result="offOut" in="SourceGraphic" dx="0" dy="1" stdDeviation="10" />
   <feGaussianBlur result="blurOut" in="offOut" stdDeviation="3" />
   <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
  </filter>
 </defs>
 <g>
  <path fill-rule="evenodd" clip-rule="evenodd"
        fill="#41625A"
        d="M20,20h310l40,40v17H20V-20z"
        filter="url(#f2)"/>
 </g>
</svg>

我做的<svg>有固定的宽度和高度。我不知道是否可以通过使用 calc() 创建一个具有动态宽度的，同时将角的切割角保持在 45 度，就像 clip-paths 一样。这可能是可能的，但我对 <svg> 属性和功能的了解有限。如果我发现这种可能性，我会确保更新我的答案。

Answer 3

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

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

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

Answer 4

我最终选择了这个...

.sideNav {
        background: rgba(24,69,59,.8);
        color: #FFF;
        padding: 10px;
        position: relative;
 } 

.sideNav:before {
            content: "";
            position: absolute;
            top: -5px;
            right: -5px;
            border-width: 50px 0px 0px 50px;
            border-style: solid;
            border-color: #fff #fff transparent transparent;
            background-clip: content-box;
        }

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

.zDepth1 {
    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14),0 1px 5px 0 rgba(0,0,0,0.12),0 3px 1px -2px rgba(0,0,0,0.2);
}

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

:before psuedo-element 允许我简单地掩盖显示的边框。

"clipped" 角周围的框阴影

Box-shadow around "clipped" corner

html

css

css-shapes