如何实现与自定义按钮轮廓匹配的背景？求轮廓替代创建方案

我通过以下代码实现了一个带有特殊多边形轮廓的Submit按钮（效果截图：），现在需要做一个和该按钮轮廓完全匹配的镂空背景（目标效果截图：），同时想了解创建这类轮廓形状的其他技术方案。

当前实现的代码如下：

HTML代码 #

<br><br><br><br>
<center><button class="btn" type="submit">
        Submit
      </button></center>

CSS代码 #

.btn{
      background-image: -webkit-linear-gradient(bottom, #D4AF37, #D4AF37, #D4AF37, #D4AF37, #D4AF37);
    background-image: -o-linear-gradient(bottom, #D4AF37, #D4AF37, #D4AF37, #D4AF37, #D4AF37);
    background-image: linear-gradient(to top, #D4AF37, #D4AF37, #D4AF37, #D4AF37, #D4AF37);
    -webkit-clip-path: polygon(0% 0%,100% 0%,100% 100%,100% 80%,94% 100%,100% 100%,0% 100%);
    clip-path: polygon(0% 0%,100% 0%,100% 100%,100% 80%,94% 100%,100% 100%,0% 100%);
    padding:15px 30px;
    color:#fff;
    border-radius:0;
    border: none;
}

一、实现匹配的镂空背景 #

要做出和按钮轮廓完全一致的镂空背景，最简单的方式是复用按钮的clip-path规则，通过伪元素或容器实现反向/放大的裁剪效果，以下是两种可行方案：

方案1：复用clip-path做放大背景 #

给按钮套一个容器，用容器的伪元素生成背景，应用和按钮相同的clip-path并放大，就能得到匹配的镂空效果：

<div class="btn-wrapper">
  <button class="btn" type="submit">Submit</button>
</div>

.btn-wrapper {
  position: relative;
  width: fit-content;
  margin: 4rem auto;
}

/* 生成镂空背景 */
.btn-wrapper::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: #e0e0e0; /* 替换成你需要的背景色 */
  clip-path: polygon(0% 0%,100% 0%,100% 100%,100% 80%,94% 100%,100% 100%,0% 100%);
  transform: scale(1.1); /* 放大背景，让镂空区域比按钮大一圈，匹配目标效果 */
  z-index: -1;
}

.btn{
  background-image: linear-gradient(to top, #D4AF37, #D4AF37, #D4AF37, #D4AF37, #D4AF37);
  -webkit-clip-path: polygon(0% 0%,100% 0%,100% 100%,100% 80%,94% 100%,100% 100%,0% 100%);
  clip-path: polygon(0% 0%,100% 0%,100% 100%,100% 80%,94% 100%,100% 100%,0% 100%);
  padding:15px 30px;
  color:#fff;
  border-radius:0;
  border: none;
  position: relative;
  z-index: 1;
}

方案2：CSS Mask实现精准镂空 #

如果需要更精准的控制，可以用CSS Mask结合SVG定义形状，这种方式兼容性也更稳定：

<div class="btn-wrapper">
  <button class="btn" type="submit">Submit</button>
</div>

<!-- 定义按钮形状的SVG，隐藏不显示 -->
<svg width="0" height="0">
  <defs>
    <path id="button-shape" d="M0,0 L100%,0 L100%,100% L100%,80% L94%,100% L100%,100% L0,100% Z" />
  </defs>
</svg>

.btn-wrapper {
  position: relative;
  width: fit-content;
  margin: 4rem auto;
  background-color: #e0e0e0;
  /* 使用SVG路径作为遮罩 */
  mask: url(#button-shape) no-repeat center/contain;
  -webkit-mask: url(#button-shape) no-repeat center/contain;
  padding: 20px; /* 调整内边距控制背景大小 */
}

.btn{
  /* 保持原有按钮样式不变 */
  background-image: linear-gradient(to top, #D4AF37, #D4AF37, #D4AF37, #D4AF37, #D4AF37);
  -webkit-clip-path: polygon(0% 0%,100% 0%,100% 100%,100% 80%,94% 100%,100% 100%,0% 100%);
  clip-path: polygon(0% 0%,100% 0%,100% 100%,100% 80%,94% 100%,100% 100%,0% 100%);
  padding:15px 30px;
  color:#fff;
  border-radius:0;
  border: none;
}

二、创建特殊轮廓形状的其他技术方案 #

1. SVG路径绘制 #

直接用SVG绘制按钮形状，兼容性好，支持复杂路径编辑，还能直接在SVG内添加文字：

<svg class="btn-svg" viewBox="0 0 220 60" cursor="pointer">
  <!-- 绘制按钮形状 -->
  <path d="M0,0 L220,0 L220,60 L220,48 L206.8,60 L220,60 L0,60 Z" fill="#D4AF37" />
  <!-- 添加按钮文字 -->
  <text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" fill="#fff" font-size="16px">Submit</text>
</svg>

可以给SVG绑定点击事件，或者把它放在<button>标签内，实现按钮功能。

2. CSS边框伪元素技巧 #

对于简单的边角修改（比如按钮右下角的小三角），可以用伪元素的边框特性实现，代码更简洁：

.btn {
  background-color: #D4AF37;
  padding:15px 30px;
  color:#fff;
  border: none;
  position: relative;
  overflow: hidden;
}

/* 右下角的小三角 */
.btn::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  width: 0;
  height: 0;
  /* 通过边框绘制三角，颜色要和按钮外的背景一致 */
  border-left: 6px solid transparent;
  border-top: 12px solid transparent;
  border-bottom: 12px solid #fff;
}

这种方式适合简单形状，复杂多边形还是clip-path更高效。

3. 图片背景 #

如果形状特别复杂，可以直接用PNG/SVG图片作为按钮背景，缺点是修改样式需要重新编辑图片，灵活性较差：

.btn {
  background: url('button-shape.png') no-repeat center/contain;
  padding:15px 30px;
  color:#fff;
  border: none;
  text-align: center;
}

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