CSS自定义按钮

我正在做我的定制曲线按钮。但我面临一个问题，按钮的右下方没有显示边框。也许我做错了什么？我需要做一个像这样的按钮

几乎全部完成，但右下侧没有边框

这是密码

.polygon.outer{
显示：内联块；
宽度：118px；
高度：20px；
背景：白色；
位置：相对位置；
颜色：#F94141；
边框：2件纯黑；
文本对齐：居中；
字号：18px；
字体大小：400；
文本转换：大写；
-webkit剪辑路径：多边形（0px 80px、0px 50%、0px、290px 0px、145px 50%、63px 78px）；
剪辑路径：多边形（0px 80px，0px 50%，0px，290px 0px，145px 50%，63px 78px）；
填充：11px 7px；
}

页面标题

为什么包括

 -webkit-clip-path: polygon(0px 80px, 0px 50%, 0 0px, 290px 0px, 145px 50%, 63px 78px);
        clip-path: polygon(0px 80px, 0px 50%, 0 0px, 290px 0px, 145px 50%, 63px 78px);

删除它，您的代码将正常工作

.polygon.outer{
显示：内联块；
宽度：118px；
高度：20px；
背景：白色；
位置：相对位置；
颜色：#F94141；
边框：2件纯黑；
文本对齐：居中；
字号：18px；
字体大小：400；
文本转换：大写；
填充：11px 7px；
}

页面标题

使用多边形类的背景色作为边框颜色。然后将内部块（称为.outer？？）定位，并将其绝对定位在另一个块中

通过这种方式，可以剪切出所需的多边形

我还没有完全按照您想要的方式设计它，但是您将通过一些修补来解决它

专业提示：尝试在多边形中使用尽可能多的百分比。它更清晰，并且在调整多边形大小后，不必完全重写多边形

如果需要，您可以将其设置为scss混合，这将使其更加灵活（例如.outer类的计算）

这里有一个制作剪辑路径的有用工具（将以百分比输出）

.polygon.outer{
显示：内联块；
背景：白色；
颜色：#F94141；
文本对齐：居中；
字号：18px；
字体大小：400；
文本转换：大写；
-webkit剪辑路径：多边形（0,100%0,100%85%，70%100%，0,100%）；
剪辑路径：多边形（0,100%0,100%85%，70%100%，0,100%）；
填充：11px 7px；
}
.多边形{
位置：相对位置；
宽度：132px；
高度：20px；
背景色：黑色；
填充：11px 7px；
-webkit剪辑路径：多边形（0,100%0,100%85%，70%100%，0,100%）；
剪辑路径：多边形（0,100%0,100%85%，70%100%，0,100%）；
}
.外部{
位置：绝对位置；
顶部：2px；/*等于边框厚度*/
左：2px；/*等于边框厚度*/
宽度：128px；/*容器高度-（边框厚度*2）*/
高度：16px；/*容器高度-（边框厚度*2）*/
}

页面标题

这是同样的小提琴，也许它会帮助你：

我用过：

.polygon {
    -webkit-clip-path: polygon(0px 80px, 0px 50%, 0 0px, 290px 0px, 145px 50%, 63px 78px);
    clip-path: polygon(0px 80px, 0px 50%, 0 0px, 290px 0px, 145px 50%, 63px 78px);
    width: 135px;
    height: 46px;
    background: black;
}

.polygon .outer {
    display: inline-block;
    width: 118px;
    height: 20px;
    background: white;
    position: relative;
    color: #F94141;
    text-align: center;
    font-size: 18px;
    font-weight: 400;
    text-transform: uppercase;
    -webkit-clip-path: polygon(5px 83px, 4px 13%, 0 5px, 346px 4px, 141px 50%, 60px 76px);
    clip-path: polygon(5px 83px, 4px 13%, 0 5px, 346px 4px, 141px 50%, 60px 76px);
    padding: 11px 7px;
}

---

实际上，你已经给了span一个边框，它将隐藏在剪辑路径后面，所以，我只给它的父div另一个剪辑路径，背景颜色为

你没有仔细阅读我的问题！我要求在右下侧画一条曲线！但是边界没有显示出来！你看到一个透明的空白吗？我也想要一个边界！据我所知，你不能用简单的css，你当然可以定义边界右下半径曲线的边界，但你不会得到确切的你想要的。也许你应该考虑使用svg/画布，或者使用before和after。删除填充并添加边框宽度10px谢谢！但它看起来有点像马车，不用担心。我现在就调整它们！谢谢你的主意！