如何使用CSS clip-path为露出的内容顶部添加顶部边框？

你遇到的核心问题是：clip-path会裁剪元素的所有视觉部分，包括box-shadow，所以你设置的顶部阴影被裁剪掉了，无法显示。要实现顶部的响应式边框，推荐使用伪元素来模拟，具体方案如下：

实现思路 #

• 给.divider添加一个伪元素（::before），设置与父元素完全一致的clip-path路径
• 伪元素的尺寸比父元素稍大，颜色设为边框色
• 将伪元素定位在父元素下方，作为底层的"边框"，父元素的背景色覆盖在上方，只露出顶部的边框部分

修改后的完整代码 #

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Clip Path with Visible Border</title>
  <style>
    * {
      padding: 0;
      margin: 0;
      box-sizing: border-box;
    }
    .divider {
      position: relative;
      background-color: blueviolet;
      clip-path: polygon(40% 0%, 60% 0%, 64% 10%, 100% 10%, 100% 100%, 0% 100%, 0% 10%, 35% 10%);
      padding: 200px;
    }
    /* 伪元素实现顶部边框 */
    .divider::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: #03FAFE; /* 边框颜色 */
      clip-path: inherit; /* 继承父元素的clip-path */
      transform: scaleY(1.02); /* 垂直方向放大一点，露出顶部边框 */
      z-index: -1; /* 放在父元素下方 */
    }
  </style>
</head>
<body>
  <section style="background-color: rgb(197, 177, 177); padding: 100px 0px;">
    <!-- Section Above -->
  </section>

  <section class="divider">
    <!-- Divider Content -->
  </section>

  <section style="background-color: rgb(0, 0, 0); padding: 100px 0px;">
    <!-- Section Below -->
  </section>
</body>
</html>

关键细节说明 #

• clip-path: inherit：让伪元素完全复用父元素的裁剪路径，保证边框形状和父元素一致
• transform: scaleY(1.02)：垂直方向轻微放大伪元素，这样顶部的边框部分就会从父元素的顶部边缘露出来，数值可以根据需要调整（比如1.01~1.05）
• z-index: -1：将伪元素置于父元素下方，避免遮挡父元素的内容
• 响应式兼容：因为所有尺寸和路径都使用百分比，所以在不同屏幕尺寸下，边框形状会自动适配父元素的裁剪效果

内容的提问来源于stack exchange，提问作者Rejuanul Islam