如何使用Material-UI和React创建多边形样式按钮

给你几个可行的实现方案，可根据兼容需求和精度要求选择：

1. CSS clip-path 剪裁方案 #

这是最简洁的纯CSS实现方式，通过自定义多边形路径裁切按钮：

• 先给按钮设置基础样式，再用clip-path: polygon()定义顶点坐标，参考示例代码：

.polygon-btn {
  padding: 12px 32px;
  background: #2563eb; /* 替换成你的按钮颜色 */
  color: #fff;
  border: none;
  font-size: 16px;
  cursor: pointer;
  /* 百分比可根据设计稿调整，匹配多边形角度 */
  clip-path: polygon(0 0, 90% 0, 100% 50%, 90% 100%, 0 100%, 10% 50%);
}
/* hover交互效果 */
.polygon-btn:hover {
  background: #1d4ed8;
}

• 调整polygon()里的坐标值就能精准匹配设计稿形状，缺点是IE浏览器不支持clip-path

2. SVG 实现方案 #

如果需要更好的兼容性或更精确的形状，SVG是最优解：

• 可以把SVG作为按钮背景图，用data URI直接嵌入代码：

.polygon-btn {
  padding: 12px 32px;
  border: none;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="220" height="60"><path d="M0 0 L198 0 L220 30 L198 60 L0 60 L22 30 Z" fill="%232563eb"/></svg>') no-repeat center/100% 100%;
}

• 也可以直接内联SVG，把文字放在<text>标签里，这种方式能更灵活控制形状和样式，兼容性覆盖到IE9+

3. 伪元素拼接方案 #

要兼容IE8及以下的话，可用CSS伪元素拼接出多边形：

• 主元素做中间矩形，左右用伪元素绘制三角形拼接：

.polygon-btn {
  position: relative;
  padding: 12px 24px;
  background: #2563eb;
  color: #fff;
  border: none;
  font-size: 16px;
  cursor: pointer;
  margin: 0 16px;
}
.polygon-btn::before {
  content: '';
  position: absolute;
  left: -16px;
  top: 0;
  width: 0;
  height: 0;
  border-top: 30px solid transparent;
  border-bottom: 30px solid transparent;
  border-right: 16px solid #2563eb;
}
.polygon-btn::after {
  content: '';
  position: absolute;
  right: -16px;
  top: 0;
  width: 0;
  height: 0;
  border-top: 30px solid transparent;
  border-bottom: 30px solid transparent;
  border-left: 16px solid #2563eb;
}
.polygon-btn:hover::before,
.polygon-btn:hover::after {
  border-right-color: #1d4ed8;
  border-left-color: #1d4ed8;
}
.polygon-btn:hover {
  background: #1d4ed8;
}

• 这种方式需要精确计算伪元素尺寸，优点是兼容性极强

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