如何通过clip-path实现裁剪按钮的边缘平滑（类border-radius效果）

问题本质 #

你用clip-path: polygon()实现的裁剪是直线段拼接的形状，元素自带的border-radius会被clip-path完全覆盖，无法生效；而你尝试的goo滤镜是用于形状融合效果的，和边缘平滑的需求不匹配，所以没有作用。

可行解决方案 #

方案1：用clip-path: path()绘制带圆角的裁剪路径（推荐）

path()支持SVG路径语法，可以直接绘制带圆角的曲线边缘，从根源解决平滑问题：

div {
  padding: 56px 96px;
}

.clipped-btn {
  padding: 16px 32px;
  /* 8px圆角的裁剪路径，对应原多边形的形状 */
  clip-path: path('M8,0 L90%,0 Ccalc(90% + 4px),0 calc(100% - 29%),4 calc(100% - 29%),8 L100%,calc(100% - 8) C100%,calc(100% - 4) calc(100% - 4),100% calc(100% - 8),100% L8,100% C4,100% 0,calc(100% - 4) 0,calc(100% - 8) L0,calc(50% + 4) C0,calc(50% + 8) 4,calc(50% + 8) 8,50% Z');
  background: #2563eb;
  color: #fff;
  border: none;
  cursor: pointer;
}

<div>
  <button class="clipped-btn">I am clipped</button>
</div>

说明：路径中的C命令是贝塞尔曲线，用来生成圆角，你可以调整4px/8px这类数值来改变圆角大小，完全匹配你的需求。

方案2：消除polygon裁剪的锯齿（仅适用于直线边缘抗锯齿）

如果只是想消除polygon裁剪后的锯齿边缘，而非实现曲线，可以用模糊滤镜配合缩放抵消模糊效果：

div {
  padding: 56px 96px;
}

.clipped-btn {
  padding: 16px 32px;
  clip-path: polygon(0 0, 90% 0, 100% 29%, 100% 100%, 0 100%, 0% 50%);
  filter: blur(0.5px);
  transform: scale(1.01);
  background: #2563eb;
  color: #fff;
  border: none;
  cursor: pointer;
}

<div>
  <button class="clipped-btn">I am clipped</button>
</div>

重要提示 #

• clip-path: polygon()只能生成直线段形状，无法直接实现曲线边缘，必须使用path()语法。
• 元素的border-radius会被clip-path覆盖，因此需要在裁剪路径中直接定义圆角。

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