如何不使用clip-path仅用CSS创建自定义形状按钮？

你要实现的这种不对称斜角按钮，不用clip-path的话，可以通过多层线性渐变+伪元素的组合来模拟，下面是具体实现方案：

实现思路 #

利用线性渐变的透明/实色分界模拟斜角，配合伪元素处理右上角和右下角的小斜切区域，整体效果和你用clip-path实现的完全一致。

完整代码示例 #

/* 基础按钮样式 */
.custom-button {
  position: relative;
  padding: 16px 48px;
  border: none;
  font-size: 16px;
  color: #fff;
  /* 按钮主体背景色 */
  background-color: #2563eb;
  /* 处理左侧上下斜角 */
  background-image:
    /* 左上角斜切：对应clip-path的0% 32.4%到88% 1% */
    linear-gradient(to top right, transparent 49.5%, #2563eb 50%),
    /* 左下角斜切：对应clip-path的1% 78.43%到88% 98% */
    linear-gradient(to bottom right, transparent 49.5%, #2563eb 50%);
  background-size:
    100% 32.4%,
    100% calc(100% - 78.43%);
  background-position:
    top left,
    bottom left;
  background-repeat: no-repeat;
  cursor: pointer;
}

/* 处理右上角和右下角的小斜切 */
.custom-button::before,
.custom-button::after {
  content: "";
  position: absolute;
  right: 0;
  width: 12%; /* 对应clip-path里的88%宽度，剩余12%用伪元素处理 */
}

.custom-button::before {
  top: 0;
  height: 1%; /* 对应clip-path的顶部1%位置 */
  background: linear-gradient(to bottom left, transparent 49.5%, #2563eb 50%);
}

.custom-button::after {
  bottom: 0;
  height: 2%; /* 对应clip-path的底部98%位置，剩余2%高度做斜切 */
  background: linear-gradient(to top left, transparent 49.5%, #2563eb 50%);
}

/* hover状态示例 */
.custom-button:hover {
  background-color: #1d4ed8;
  background-image:
    linear-gradient(to top right, transparent 49.5%, #1d4ed8 50%),
    linear-gradient(to bottom right, transparent 49.5%, #1d4ed8 50%);
}

.custom-button:hover::before {
  background: linear-gradient(to bottom left, transparent 49.5%, #1d4ed8 50%);
}

.custom-button:hover::after {
  background: linear-gradient(to top left, transparent 49.5%, #1d4ed8 50%);
}

补充说明 #

• 所有百分比参数完全对应你原clip-path的数值，确保形状精准匹配
• 这种方法兼容性比clip-path更好（支持到IE10+），且不会干扰按钮内部内容的布局
• 调整按钮大小只需修改padding，斜角的百分比会自动适配

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