如何用CSS高效实现圆角带斜切的按钮效果？

要实现一个圆角带斜切的按钮效果，可以使用CSS的clip-path属性或transform属性来实现斜切效果，并结合border-radius来实现圆角。以下是两种实现方式：

方法一：使用 clip-path 实现斜切效果

<button class="cut-corner-button">Click Me</button>

.cut-corner-button {
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 10px; /* 圆角 */
  clip-path: polygon(
    0 0, /* 左上角 */
    calc(100% - 20px) 0, /* 右上角 */
    100% 20px, /* 右上角斜切 */
    100% 100%, /* 右下角 */
    20px 100%, /* 左下角斜切 */
    0 calc(100% - 20px) /* 左下角 */
  );
  cursor: pointer;
  font-size: 16px;
}

方法二：使用 transform 实现斜切效果

<button class="skewed-button">Click Me</button>

.skewed-button {
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 10px; /* 圆角 */
  position: relative;
  overflow: hidden;
  cursor: pointer;
  font-size: 16px;
}

.skewed-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: inherit;
  transform: skewX(-15deg); /* 斜切角度 */
  z-index: -1;
  border-radius: 10px; /* 圆角 */
}

解释：

1. clip-path 方法：

   • clip-path 属性允许你裁剪元素的显示区域。通过 polygon() 函数，你可以定义多边形的顶点，从而实现斜切效果。
   • calc(100% - 20px) 用于计算斜切的长度。

2. transform 方法：

   • 使用 ::before 伪元素来创建一个倾斜的背景层，并通过 transform: skewX(-15deg) 实现斜切效果。
   • overflow: hidden 确保伪元素不会超出按钮的边界。

选择哪种方法？

• clip-path：适合需要精确控制斜切形状的场景，但兼容性稍差（IE不支持）。
• transform：兼容性更好，适合需要支持旧浏览器的场景。

根据你的需求选择合适的方法即可。