如何仅用HTML、CSS及Tailwind CSS实现带特殊顶点的按钮？

针对你需要的左上角和右下角带特殊斜切顶点的按钮，下面提供两种实现方案：

一、纯HTML/CSS实现 #

方案1：使用clip-path直接裁剪（推荐） #

这种方式代码简洁，无需额外元素，直接通过裁剪路径定义按钮形状：

<button class="custom-btn">点击按钮</button>

.custom-btn {
  /* 基础按钮样式 */
  padding: 12px 24px;
  background-color: #2563eb;
  color: #fff;
  border: none;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.3s ease;
  
  /* 核心：自定义裁剪路径，生成切角 */
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}

.custom-btn:hover {
  background-color: #1d4ed8;
}

说明：clip-path的坐标依次定义了按钮的6个顶点，其中10px是切角的大小，可根据需求调整。

方案2：伪元素模拟切角（兼容旧浏览器） #

如果需要兼容不支持clip-path的旧浏览器，可以用伪元素生成覆盖在角落的三角：

<button class="custom-btn-pseudo">点击按钮</button>

.custom-btn-pseudo {
  position: relative;
  padding: 12px 24px;
  background-color: #2563eb;
  color: #fff;
  border: none;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.3s ease;
  /* 留出伪元素的空间，避免内容被遮挡 */
  margin: 10px;
}

/* 左上角切角：用边框生成白色三角，覆盖按钮角落 */
.custom-btn-pseudo::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  border-top: 10px solid #fff; /* 颜色需和页面背景一致 */
  border-right: 10px solid transparent;
}

/* 右下角切角 */
.custom-btn-pseudo::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  border-bottom: 10px solid #fff; /* 颜色需和页面背景一致 */
  border-left: 10px solid transparent;
}

.custom-btn-pseudo:hover {
  background-color: #1d4ed8;
}

二、Tailwind CSS实现 #

方案1：自定义clip-path工具类 #

先在tailwind.config.js中扩展自定义工具类：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./**/*.{html,js}"],
  theme: {
    extend: {
      clipPath: {
        'btn-cut': 'polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px)',
      },
    },
  },
  plugins: [],
}

然后在HTML中直接使用：

<button class="bg-blue-600 text-white px-6 py-3 font-medium hover:bg-blue-700 transition-colors cursor-pointer clip-btn-cut">
  点击按钮
</button>

如果不想修改配置文件，也可以直接内联clip-path：

<button class="bg-blue-600 text-white px-6 py-3 font-medium hover:bg-blue-700 transition-colors cursor-pointer" style="clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px)">
  点击按钮
</button>

方案2：Tailwind伪元素实现 #

利用Tailwind的伪元素类和边框属性模拟切角：

<button class="relative bg-blue-600 text-white px-6 py-3 font-medium hover:bg-blue-700 transition-colors cursor-pointer m-2.5 before:content-[''] before:absolute before:top-0 before:left-0 before:border-t-[10px] before:border-t-white before:border-r-[10px] before:border-r-transparent after:content-[''] after:absolute after:bottom-0 after:right-0 after:border-b-[10px] after:border-b-white after:border-l-[10px] after:border-l-transparent">
  点击按钮
</button>

说明：border-t-white需替换为按钮所在容器的背景色，确保切角效果自然。

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