如何为使用clip-path制作的区域分隔器添加阴影效果？

数据老陈

2026-8-17

clip-path 元素侧边阴影实现方案

问题说明

我用clip-path制作了一个顶部带凹陷尖角的区域分隔器，想要给这个多边形的6个边缘都添加阴影效果。尝试使用box-shadow时，侧边的阴影无法正常显示，目标效果是所有边缘（包括顶部的斜边和尖角）都带有柔和的阴影。

尝试的代码：

<section style=" clip-path: polygon(0 0, 50% 100px, 100% 0, 100% 100%, 0 100%);box-shadow: inset 0 0 10px 0 black;margin-top: -10px;padding-bottom: 3rem;background-color: #ffffff;">
  <div class="container">
    <div class="row"></div>
  </div>
</section>

可行解决方案

方法1：用`filter: drop-shadow()`生成外阴影

box-shadow会被clip-path的裁剪范围限制，而filter: drop-shadow()是基于元素的最终渲染形状生成阴影，能完美适配clip-path的所有边缘。

修改后的代码：

<section style="clip-path: polygon(0 0, 50% 100px, 100% 0, 100% 100%, 0 100%);filter: drop-shadow(0 0 10px rgba(0,0,0,0.5));margin-top: -10px;padding-bottom: 3rem;background-color: #ffffff;">
  <div class="container">
    <div class="row"></div>
  </div>
</section>

调整rgba的最后一个参数可以控制阴影透明度，修改模糊半径数值能调整阴影柔和度。

方法2：伪元素叠加实现内阴影

如果需要内阴影效果，可以通过伪元素复制相同的clip-path形状，放大后添加模糊效果来模拟：

<section style="position: relative;clip-path: polygon(0 0, 50% 100px, 100% 0, 100% 100%, 0 100%);margin-top: -10px;padding-bottom: 3rem;background-color: #ffffff;">
  <div class="container">
    <div class="row"></div>
  </div>
  <style>
    section::before {
      content: '';
      position: absolute;
      inset: 0;
      transform: scale(1.02);
      clip-path: inherit;
      background: rgba(0,0,0,0.3);
      filter: blur(8px);
      z-index: -1;
    }
  </style>
</section>