CSS裁剪按钮效果不符合预期：右上角与左下角圆角实现求助

当前效果 #

预期效果 #

现有实现代码 #

CSS代码 #

.clipped-button { 
  height: 42px; 
  min-width:120px; 
  width: auto; 
  display: block;
  border:none; 
  border-radius:2px; 
  align-items:center;
  clip-path: polygon(0px 0%, 0px 60%, 18px 100%, 100% 100%, 100% 40%, calc(100% - 18px) 0px); 
  padding: 2.625px;
  background-color: #993029;
}
.btn { 
  width: 100%; 
  height: 100%; 
  background-color: rgb(205, 65, 58); 
  display:flex; 
  justify-content:center; 
  align-items:center; 
  clip-path: polygon(0px 0%, 0px 60%, 16px 100%, 100% 100%, 100% 40%, calc(100% - 16px) 0px); 
  color: rgb(255, 255, 255);
}

HTML代码 #

<button class="clipped-button"><div class="btn">Click Me</div></button>

问题说明 #

当前裁剪按钮的右上角与左下角无法呈现圆角效果，需要修改代码实现该需求。

解决方案 #

核心思路是用clip-path的path()函数替代polygon()，通过贝塞尔曲线绘制带圆角的裁剪路径，同时保持内外层按钮的路径匹配，维持边框宽度一致。

修改后的代码如下：

CSS代码 #

.clipped-button { 
  height: 42px; 
  min-width: 120px; 
  width: auto; 
  display: flex;
  align-items: center;
  border: none; 
  padding: 2.625px;
  background-color: #993029;
  /* 带圆角的外层裁剪路径 */
  clip-path: path('M 4 0 L calc(100% - 22) 0 C calc(100% - 18) 0, calc(100% - 14) 4, calc(100% - 14) 8 L 100% 40 C 100% 44, 96 48, 92 48 L 22 48 C 18 48, 14 44, 14 40 L 0 60 C 0 64, -4 68, -8 68 L -8 4 C -8 0, -4 0, 0 0 Z');
}
.btn { 
  width: 100%; 
  height: 100%; 
  background-color: rgb(205, 65, 58); 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  color: rgb(255, 255, 255);
  /* 内层裁剪路径，匹配外层形状并调整偏移量 */
  clip-path: path('M 4 0 L calc(100% - 20) 0 C calc(100% - 16) 0, calc(100% - 12) 4, calc(100% - 12) 8 L 100% 40 C 100% 44, 96 48, 92 48 L 20 48 C 16 48, 12 44, 12 40 L 0 60 C 0 64, -4 68, -8 68 L -8 4 C -8 0, -4 0, 0 0 Z');
}

HTML代码（无需修改） #

<button class="clipped-button"><div class="btn">Click Me</div></button>

调整说明 #

• 路径中的C命令是三次贝塞尔曲线，用来模拟圆角的平滑过渡，你可以调整曲线控制点的数值来改变圆角大小。
• 内外层路径的偏移量差保持和原代码的padding一致，确保边框宽度统一。

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