如何用CSS实现带特殊切角的按钮？

当然没问题！这种带特殊切角的按钮用CSS完全能实现，而且有好几种实用的方案，我给你整理了几个最常用的👇

方案一：Clip-path 快速实现（推荐） #

clip-path是现代浏览器支持的属性，可以直接定义元素的裁剪路径，代码简单易维护，是实现这类不规则形状的首选方案。

代码示例： #

<button class="cut-corner-btn">特殊切角按钮</button>

.cut-corner-btn {
  /* 基础按钮样式 */
  padding: 12px 32px;
  font-size: 16px;
  border: none;
  background: #2563eb;
  color: #fff;
  cursor: pointer;
  transition: background 0.3s;
  
  /* 关键：自定义切角路径，可根据需求调整数值 */
  clip-path: polygon(15px 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%, 0 15px);
}

/* hover 交互效果 */
.cut-corner-btn:hover {
  background: #1d4ed8;
}

说明： #

polygon()里的每一组坐标对应一个顶点，比如15px 0是左上角向右偏移15px的点，0 15px是左上角向下偏移15px的点，两者连接就形成了左上的切角；右下角的切角逻辑同理，你可以修改15px这个数值来调整切角的大小。

方案二：伪元素+背景渐变（兼容老浏览器） #

如果需要兼容IE这类老浏览器，可以用伪元素模拟切角效果，核心是通过渐变在按钮角落生成和背景色匹配的“遮挡块”。

代码示例： #

<button class="pseudo-cut-btn">特殊切角按钮</button>

.pseudo-cut-btn {
  position: relative;
  padding: 12px 32px;
  font-size: 16px;
  border: none;
  background: #2563eb;
  color: #fff;
  cursor: pointer;
  transition: background 0.3s;
  overflow: hidden; /* 隐藏伪元素超出部分 */
}

/* 左上角切角 */
.pseudo-cut-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  /* 渐变生成斜角，颜色要和按钮背景色一致 */
  background: linear-gradient(135deg, transparent 50%, #2563eb 50%);
}

/* 右下角切角 */
.pseudo-cut-btn::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 20px;
  height: 20px;
  background: linear-gradient(-45deg, transparent 50%, #2563eb 50%);
}

/* hover 时同步更新伪元素颜色 */
.pseudo-cut-btn:hover {
  background: #1d4ed8;
}
.pseudo-cut-btn:hover::before {
  background: linear-gradient(135deg, transparent 50%, #1d4ed8 50%);
}
.pseudo-cut-btn:hover::after {
  background: linear-gradient(-45deg, transparent 50%, #1d4ed8 50%);
}

说明： #

这里的渐变颜色要和按钮背景色完全匹配，hover状态下也要同步修改伪元素的渐变颜色，才能保证切角效果一致。

方案三：边框三角形技巧（简单场景适用） #

利用CSS边框的三角形特性，在按钮角落生成和父容器同色的三角形，模拟切角效果，适合背景色单一的简单场景。

代码示例： #

<button class="border-cut-btn">特殊切角按钮</button>

.border-cut-btn {
  position: relative;
  padding: 12px 32px;
  font-size: 16px;
  border: none;
  background: #2563eb;
  color: #fff;
  cursor: pointer;
  transition: background 0.3s;
}

/* 左上角切角 */
.border-cut-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  /* 边框生成三角形，颜色要和按钮父容器背景色一致 */
  border-top: 20px solid #fff;
  border-right: 20px solid transparent;
}

/* 右下角切角 */
.border-cut-btn::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  border-bottom: 20px solid #fff;
  border-left: 20px solid transparent;
}

.border-cut-btn:hover {
  background: #1d4ed8;
}

说明： #

这个方法的缺点是如果按钮背景是渐变或者复杂图案，就无法完美匹配，所以更适合背景色单一的场景。

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