Javascript 如何创建左上角和右下角为45度直角的按钮？

我想创建一个左上角和右下角为45度直角的按钮。这样的按钮可以在HTML/CSS中创建吗？或者我必须使用图像？请导游。
这是一个按钮图像。

这是一个密码

按钮{
边框样式：无；
高度：60px；
背景：无；
边框：2倍实心#000000；
填充：0 60px；
颜色：#000000；
字体大小：24px；
大纲：无；
边界半径：50px 0；
}

---

按钮

您可以使用

:before

和

:after

css选择器获得该形状。 我在两个标签中的

按钮
标签和
:before
和
:before
和
:before
选择器中添加了
span
，以获得此形状


按钮{
边框样式：无；
高度：60px；
背景：无；
边界：无；
填充：0 60px；
颜色：#000000；
字体大小：24px；
大纲：无；
位置：相对位置；
}
按钮：之前{
内容：“；
宽度：85%；
高度：30px；
显示：块；
边框顶部：2倍实心；
右边框：2倍实心；
位置：绝对位置；
右：0；
排名：0；
}
按钮：之后{
内容：“；
宽度：85%；
高度：30px；
显示：块；
边框底部：2倍实心；
左边框：2倍实心；
位置：绝对位置；
左：0；
底部：0；
}
按钮跨度{
显示：块；
}
按钮跨度：之前{
内容：“；
宽度：38px；
高度：2倍；
背景：#000；
位置：绝对位置；
左：-5px；
顶部：14px；
变换：旋转（-46度）；
}
按钮跨度：之后{
内容：“；
宽度：38px；
高度：2倍；
背景：#000；
位置：绝对位置；
右：-5px；
底部：14px；
变换：旋转（-46度）；
}
按钮：悬停{
颜色：红色；
}
按钮：悬停：之前，
按钮：悬停：之后{
边框颜色：红色；
}
按钮：悬停范围：之前，
按钮：悬停范围：之后{
背景：红色；
}
按钮
在另一个按钮中使用多边形：



按钮
也许会有帮助？或者45度角是45度角，直线角是180度角。45度的直角没有意义。是的，你是对的，但我的意思是45度的角度，但不是曲线。如图所示。请添加此操作的说明-谢谢！