使用clip-path实现带内边框的不透明文本盒问题求助

我需要制作一个带内嵌边框和不透明背景的文本盒，用clip-path定义盒子的多边形形状。但原生border无法跟随clip-path的形状，所以尝试用filter: drop-shadow模拟边框，通过嵌套clip-path盒子实现内嵌效果，但始终无法让背景完全不透明。

预期效果：多边形（四个角带有切角）的文本盒，内嵌深色边框，背景为不透明渐变，内部包含文本内容。

原代码 #

HTML #

<div class="box">
  <div class="box__shaped">
    <div class="box__shaped__inner">
      <div class="box__shaped__text">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
      </div>
    </div>
  </div>
</div>

SCSS #

%boxContent {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-size: cover;
  z-index: -1;
  clip-path: polygon(5% 0, 100% 0, 100% 95%, 95% 100%, 0 100%, 0 5%);
}

.box {
  position: relative;
  text-align: center;
  width: 95%;
  max-width: 45rem;
  margin: 0 auto;

  &__shaped {
    display: inline-block;
    padding: 10px;

    &:before {
      @extend %boxContent;
      background: linear-gradient(
        to bottom right,
        rgba($color-box-dark, 0.7) 0%,
        rgba($color-box-light, 0.7) 40%,
        rgba($color-box-light, 0.7) 60%,
        rgba($color-box-dark, 0.7) 100%
      );
    }

    &__inner {
      display: inline-block;
      width: 100%;
      padding: 25px;
      filter: drop-shadow(0px 2px 0px $color-box-border)
        drop-shadow(2px 0px 0px $color-box-border)
        drop-shadow(0px -2px 0px $color-box-border)
        drop-shadow(-2px 0px 0px $color-box-border);

      &:before {
        @extend %boxContent;
        background: linear-gradient(
          to bottom right,
          rgba($color-box-dark, 0.9) 0%,
          rgba($color-box-light, 0.9) 40%,
          rgba($color-box-light, 0.9) 60%,
          rgba($color-box-dark, 0.9) 100%
        );
      }
    }
  }
}

解决方案 #

问题根源在于drop-shadow的应用层级错误，以及伪元素堆叠导致背景透明度异常。以下是修正后的实现：

修改后的HTML（简化结构） #

<div class="box">
  <div class="box__content">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  </div>
</div>

修改后的SCSS #

// 自定义颜色变量，可根据需求替换
$color-box-dark: #2c3e50;
$color-box-light: #ecf0f1;
$color-box-border: #34495e;
// 统一定义clip-path形状
$clip-shape: polygon(5% 0, 100% 0, 100% 95%, 95% 100%, 0 100%, 0 5%);

.box {
  position: relative;
  width: 95%;
  max-width: 45rem;
  margin: 0 auto;
  // padding值等于边框宽度，为drop-shadow预留空间
  padding: 2px;
  // 用drop-shadow生成边框
  filter: drop-shadow(0 0 0 2px $color-box-border);
  // 裁剪外层，让边框跟随clip-path形状
  clip-path: $clip-shape;

  &__content {
    // 设置不透明的渐变背景
    background: linear-gradient(
      to bottom right,
      $color-box-dark 0%,
      $color-box-light 40%,
      $color-box-light 60%,
      $color-box-dark 100%
    );
    padding: 25px;
    // 内容区域保持相同形状
    clip-path: $clip-shape;
    color: #222;
    text-align: left;
  }
}

核心修改点 #

1. 简化嵌套：去掉多余的div层级，减少堆叠上下文冲突
2. 边框实现：外层容器通过padding + drop-shadow + clip-path组合，实现内嵌边框跟随多边形形状的效果
3. 不透明背景：直接给内容区域设置不透明渐变，避免伪元素z-index导致的透明度问题
4. 统一形状：将clip-path定义为变量，确保内外层形状完全一致，避免错位

这样就能实现你要的内嵌边框、不透明背景的多边形文本盒效果。

内容的提问来源于stack exchange，提问作者Erik Nuber