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

您可以尝试多个框阴影，并通过线性渐变绘制对角线和背景。这是平均值，结果将与阴影和身体背景上使用的颜色不同。

.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

我已经改变了生成切割角到背景渐变的方法。

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

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

请注意，在大多数情况下，您的问题可能会被视为this question的副本，因为达到预期效果的最准确方法是使用<svg>投影。< / p>

有人可能会想到使用clip-path CSS属性可能会有效，但它只能用于inset框阴影，而不是一开始，因为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>有固定的宽度和高度。我不知道是否可以创建一个具有动态宽度的角度，同时通过使用clip-path将角落的切割角度保持在45度，就像calc()一样。这可能是可能的，但我对<svg>属性和功能的了解是有限的。如果我发现这种可能性，我会确保更新我的答案。

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>

之前：psuedo-element允许我简单地掩盖正在显示的边框。

“剪裁”角落周围的盒子阴影

4 个答案: