Html 以另一种方式交换对角拆分按钮

我有一个带有对角按钮的代码笔（）。我试着翻转它，使分裂朝相反的方向发展（从左上角开始到右下角），但我只是继续以一团混乱结束

我试图使这个按钮组合300像素宽和65像素高

#btn_cont{
    position: relative;
    margin: 0 auto;
    margin-top: 10%;
    /* NOT IMPORTANT */

    width: 300px;
    border: 2px solid #fff;
    height: 65px;
}
.btn-split{
    display: block;
    position: absolute;
    float: left;
    width: 158px;
    height: 0;
    cursor: pointer;
}
.btn-split:nth-child(1){
    border-bottom: 60px solid #c74523;
    border-left: 20px solid transparent;
    right: 0;
    z-index: 1;
}
.btn-split:nth-child(1):hover{
    border-bottom: 60px solid #fff;
    color: #c74523;
}
.btn-split:nth-child(2){
    border-right: 20px solid transparent;
    border-top: 60px solid #c74523;
    left: 0;
    z-index: 2;
}
.btn-split:nth-child(2):hover{
    border-top: 60px solid #fff;
    color: #c74523;
}

.btn-split:nth-child(2):before{
    border-right: 2px solid #fff;
    content: "";
    height: 71px;
    position: absolute;
    left: 138px;
    top: -35px;
    transform: rotate(34deg) translateZ(0px);
}
.btn-split span{
    position: relative;
    float: left;
    top: 7px;
    width: 100%;
    height:auto;
    text-align: center;
    color: #fff;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    margin: 0;
    padding: 0;
}
.btn-split:hover span{
    color: #c74523;
}
.btn-split:nth-child(2) span{
    top: -23px;

}

如果要将拆分更改为相反方向，请在前面添加“-” 34度

/

\

略有不同（更简单，imho）的方法：

正文{
背景色：#222；
}
H1{
颜色：#fff；
字体系列：Arial、Helvetica、无衬线字体；
字体大小：粗体；
宽度：100%；
文本对齐：居中；
}
#btn_cont{
位置：相对位置；
保证金：0自动；
利润率最高：10%；
/*不重要*/
溢出：隐藏；
宽度：300px；
边框：2倍实心#fff；
高度：65px；
背景：白色；
}
.btn{
显示：块；
位置：绝对位置；
宽度：150px；
身高：100%；
光标：指针；
}
.对{
背景：c74523；
变换：skewX（-45度）；
右：-30px；
宽度：60%；
}
.左{
背景：c74523；
变换：skewX（-45度）；
左：-30px；
宽度：60%；
}
.右：悬停，.左：悬停{
背景：白色；
}
.右：悬停范围，.左：悬停范围{
颜色：#c74523；
}
跨度{
浮动：左；
宽度：50%；
高度：65px；
线高：65px；
颜色：白色；
左侧填充：60px；
位置：相对位置；
显示：块；
变换：skewX（45度）；
}

CSS拆分按钮
BTN 1
BTN 2

您可以只使用伪选择器，然后只需交换每个选择器的边界规则

工作示例：

正文{
背景色：#607D8B；
填充：25px0；
}
/*奥格*/
.btn\u继续左{
位置：相对位置；
保证金：0自动；
宽度：300px；
边框：2px实心#FAFAFA；
高度：30px；
}
.btn_cont_left.btn{
显示：内联块；
位置：绝对位置；
浮动：左；
宽度：141px；
身高：0；
光标：指针；
}
.btn_cont_left.btn:n个孩子（1）：之前{
内容：''；
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
边框顶部：0px实心透明；
右边框：20px实心透明；
边框底部：30px实心#01579B；
左边框：0px实心#01579B；
}
.btn_cont_left.btn:悬停：第n个子项（1）：之前{
边框底部：30px实心#FAFAFA；
颜色：#01579B；
}
.btn_cont_left.btn:n第n个子项（2）{
右：0；
}
.btn_cont_left.btn:第n个孩子（2）：之前{
内容：''；
位置：绝对位置；
排名：0；
右：0；
宽度：100%；
边框顶部：30px实心#01579B；
右边框：0px实心#01579B；
边框底部：0px实心透明；
左边框：20px实心透明；
}
.btn_cont_left.btn:悬停：第n个子项（2）：之前{
边框顶部：30px实心#FAFAFA；
颜色：#01579B；
}
.btn_cont_left.btn:第n个孩子（2）：之后{
内容：“；
位置：绝对位置；
高度：39px；
顶部：-4px；
右：150px；
右边框：2px实心#FAFAFA；
变换：旋转（-34度）translateZ（0px）；
}
.btn\u继续左。btn跨度{
位置：相对位置；
浮动：左；
顶部：7px；
宽度：100%；
高度：自动；
文本对齐：居中；
颜色：#FAFAFA；
字体系列：Arial、Helvetica、无衬线字体；
字体大小：粗体；
保证金：0；
填充：0；
}
.btn_cont_left.btn:悬停范围{
颜色：#01579B；
}
/*新的*/
.btn\u继续右键{
位置：相对位置；
保证金：0自动；
宽度：300px；
边框：2px实心#FAFAFA；
高度：30px；
}
.btn_cont_right.btn{
显示：内联块；
位置：绝对位置；
浮动：左；
宽度：141px；
身高：0；
光标：指针；
}
.btn_cont_right.btn:n个孩子（1）：之前{
内容：''；
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
边框顶部：30px固体#b71c1c；
右边框：20px实心透明；
边框底部：0px实心透明；
左边框：0px实心#b71c1c；
}
.btn_cont_right.btn:悬停：第n个子项（1）：之前{
边框顶部：30px实心#FAFAFA；
颜色：#b71c1c；
}
.btn_cont_right.btn:n个孩子（2）{
右：0；
}
.btn_cont_right.btn:第n个孩子（2）：之前{
内容：''；
位置：绝对位置；
排名：0；
右：0；
宽度：100%；
边框顶部：0px实心透明；
右边框：0px实心#b71c1c；
边框底部：30px固体#b71c1c；
左边框：20px实心透明；
}
.btn_cont_right.btn:悬停：第n个子项（2）：之前{
边框底部：30px实心#FAFAFA；
颜色：#b71c1c；
}
.btn_cont_right.btn:第n个孩子（2）：之后{
内容：“；
位置：绝对位置；
高度：39px；
顶部：-4px；
右：150px；
右边框：2px实心#FAFAFA；
变换：旋转（34度）translateZ（0px）；
}
.btn\u右下角。btn跨度{
位置：相对位置；
浮动：左；
顶部：7px；
宽度：100%；
高度：自动；
文本对齐：居中；
颜色：#FAFAFA；
字体系列：Arial、Helvetica、无衬线字体；
字体大小：粗体；
保证金：0；
填充：0；
}
.btn\u继续向右。btn：悬停范围{
颜色：#b71c1c；
}

BTN 1
BTN 2
BTN 1
BTN 2
BTN 1
BTN 2
BTN 1
BTN 2

远不止这些。请查看代码的演示或将其放在小提琴中。这弄得一团糟。

transform: rotate(34deg) translateZ(0px);

transform: rotate(-34deg) translateZ(0px);