使用clip-path后无法显示边框，如何修复自定义梯形按钮的边框？

需求与现有实现 #

需要实现6个梯形样式按钮，仅背景色不同，因此封装了ScreenBtn组件：

interface StyledBtnProps {
  title: string;
  transaction?: boolean;
}

const ScreenBtn: React.FC<StyledBtnProps> = ({
  title,
  transaction = false,
}) => {
  return (
    <button
      className={clsx(
        "relative  p-6 w-96 h-1/3 text-2xl flex justify-center gap-4 mt-20",
        "clip-trapezoid",
        {
          "bg-red-600 text-white": transaction,
          "bg-white text-red-600 border border-red-600": !transaction,
        }
      )}
    >
      <div className="">
        <InboxArrowDownIcon className="w-8 h-8" />
      </div>
      <span className="uppercase">{title}</span>
    </button>
  );
};

为实现梯形形状，在globals.css中添加了自定义类：

.clip-trapezoid {
  position: relative;
  clip-path: polygon(15px 0%, 100% 0%, 100% calc(100% - 25px), calc(100% - 25px) 100%, 0% 100%, 0% 15px);
}

.clip-trapezoid::before {
  content: '';
  position: absolute;
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  border: 4px solid red;
  clip-path: "inherit";
  z-index: -1;
}

问题 #

伪类样式未生效，裁剪后的按钮角落无法显示红色边框，实际效果不符合预期。

修复方案 #

问题根源 #

1. 伪元素的clip-path: "inherit"写法错误：引号会将inherit识别为字符串值，浏览器无法解析，导致伪元素未应用父元素的裁剪路径。
2. 父元素的clip-path会裁剪自身及所有子元素（包括伪元素），伪元素超出父元素范围的部分被隐藏，无法显示角落边框。

具体修复步骤 #

1. 修正伪元素clip-path写法：去掉inherit的引号，改为clip-path: inherit;，让伪元素正确继承父元素的裁剪路径。
2. 简化伪元素定位：用inset: -4px替代top/left/right/bottom的写法，更简洁直观。
3. 统一边框实现方式：移除组件中原生的border类，完全通过伪元素实现边框，避免原生边框被clip-path裁剪。

修改后的globals.css：

.clip-trapezoid {
  position: relative;
  clip-path: polygon(15px 0%, 100% 0%, 100% calc(100% - 25px), calc(100% - 25px) 100%, 0% 100%, 0% 15px);
}

.clip-trapezoid::before {
  content: '';
  position: absolute;
  inset: -4px; /* 等价于top/left/right/bottom: -4px */
  border: 4px solid red;
  clip-path: inherit; /* 正确继承父元素裁剪路径 */
  z-index: -1;
}

修改后的ScreenBtn组件：

interface StyledBtnProps {
  title: string;
  transaction?: boolean;
}

const ScreenBtn: React.FC<StyledBtnProps> = ({
  title,
  transaction = false,
}) => {
  return (
    <button
      className={clsx(
        "relative  p-6 w-96 h-1/3 text-2xl flex justify-center gap-4 mt-20",
        "clip-trapezoid",
        {
          "bg-red-600 text-white": transaction,
          "bg-white text-red-600": !transaction, // 移除border相关类
        }
      )}
    >
      <div className="">
        <InboxArrowDownIcon className="w-8 h-8" />
      </div>
      <span className="uppercase">{title}</span>
    </button>
  );
};

这样修改后，伪元素会按照父元素的梯形路径进行裁剪，同时因为向外扩展了4px，刚好能完整显示出角落的红色边框，符合设计需求。

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