没有 SVG 的自定义按钮答案

【问题标题】：Custom button without SVG没有 SVG 的自定义按钮
【发布时间】：2021-04-26 20:42:06
【问题描述】：

我试图用不同的方式做一个按钮。 svg 工作，但不幸的是 SVG 不支持 Next.js 和 Material UI。我在下面提供代码和屏幕截图。

任何形式的帮助都会非常有帮助

span.button__publish {
    margin-left: 45px;
    position: relative;
}

.button__publish button {
    width: 137px;
    height: 37.3px;
    border-radius: 4px;
    background-color: #8ae38c;
}

*emphasized text*
<span class="button__publish">
  <button class="MuiButtonBase-root MuiButton-root MuiButton-text publish MuiButton-textPrimary" tabindex="0" type="button">
   <span class="MuiButton-label">Publish</span>
  </button>
</span>

【问题讨论】：

相关：stackoverflow.com/a/52455695/8620333
如果 SVG 可以用作 CSS 背景
感谢@FabrizioCalderan，这是一个非常好的选择

标签： html css material-ui frontend next.js

【解决方案1】：

您可以使用 css 的 clip-path 属性。我添加了一个示例，但您必须自己找出确切的值，以便它看起来像您想要的那样。参考见the documentation on MDN。

span.button__publish {
    margin-left: 45px;
    position: relative;
}

.button__publish button {
    width: 137px;
    height: 37.3px;
    border-radius: 4px;
    background-color: #8ae38c;
    clip-path: polygon(5% 5%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
}

*emphasized text*
<span class="button__publish">
  <button class="MuiButtonBase-root MuiButton-root MuiButton-text publish MuiButton-textPrimary" tabindex="0" type="button">
   <span class="MuiButton-label">Publish</span>
  </button>
</span>

编辑：这样，部分边框也被“吃掉”了，请参阅 here 了解如何解决此问题。

【讨论】：