我有一个带有对角线按钮的codepen（http://codepen.io/Nosdo3/pen/nktms/）。我试过翻转它以使分割方向相反（从左上角开始向下到右下方），但我只是以乱七八糟的混乱结束。
我正在尝试将此按钮组合为300px宽和65px高。
#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;
}
答案 0 :(得分：1)
略有不同（简单，imho）的方法：
body{
background-color: #222;
}
H1{
color: #fff;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
width: 100%;
text-align: center;
}
#btn_cont{
position: relative;
margin: 0 auto;
margin-top: 10%;
/* NOT IMPORTANT */
overflow:hidden;
width: 300px;
border: 2px solid #fff;
height: 65px;
background:white;
}
.btn{
display: block;
position:absolute;
width: 150px;
height:100%;
cursor: pointer;
}
.right {
background:#c74523;
transform: skewX(-45deg);
right:-30px;
width:60%;
}
.left {
background:#c74523;
transform: skewX(-45deg);
left:-30px;
width:60%;
}
.right:hover, .left:hover {
background:white;
}
.right:hover span, .left:hover span{
color:#c74523;
}
span {
float:left;
width:50%;
height:65px;
line-height:65px;
color:white;
padding-left:60px;
position:relative;
display:block;
transform: skewX(45deg);
}<h1>CSS SPLIT BUTTON</h1>
<div id="btn_cont">
<div class="btn left">
<span>BTN 1</span>
</div>
<div class="btn right">
<span>BTN 2</span>
</div>
你可以稍微调整一下设置，但它应该很接近。
答案 1 :(得分：0)
如果要将拆分更改为相反方向，请添加＆＃34; - ＆＃34;之前 34deg
/
transform: rotate(34deg) translateZ(0px);
\
transform: rotate(-34deg) translateZ(0px);
答案 2 :(得分：0)
你可以使用伪选择器，然后你只需要换掉每个的边界规则。
工作示例：
body {
background-color: #607D8B;
padding: 25px 0 0;
}
/* OG */
.btn_cont_left {
position: relative;
margin: 0 auto;
width: 300px;
border: 2px solid #FAFAFA;
height: 30px;
}
.btn_cont_left .btn {
display: inline-block;
position: absolute;
float: left;
width: 141px;
height: 0;
cursor: pointer;
}
.btn_cont_left .btn:nth-child(1):before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
border-top: 0px solid transparent;
border-right: 20px solid transparent;
border-bottom: 30px solid #01579B;
border-left: 0px solid #01579B;
}
.btn_cont_left .btn:hover:nth-child(1):before {
border-bottom: 30px solid #FAFAFA;
color: #01579B;
}
.btn_cont_left .btn:nth-child(2) {
right: 0;
}
.btn_cont_left .btn:nth-child(2):before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 100%;
border-top: 30px solid #01579B;
border-right: 0px solid #01579B;
border-bottom: 0px solid transparent;
border-left: 20px solid transparent;
}
.btn_cont_left .btn:hover:nth-child(2):before {
border-top: 30px solid #FAFAFA;
color: #01579B;
}
.btn_cont_left .btn:nth-child(2):after {
content: "";
position: absolute;
height: 39px;
top: -4px;
right: 150px;
border-right: 2px solid #FAFAFA;
transform: rotate(-34deg) translateZ(0px);
}
.btn_cont_left .btn span {
position: relative;
float: left;
top: 7px;
width: 100%;
height: auto;
text-align: center;
color: #FAFAFA;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
margin: 0;
padding: 0;
}
.btn_cont_left .btn:hover span {
color: #01579B;
}
/* NEW*/
.btn_cont_right {
position: relative;
margin: 0 auto;
width: 300px;
border: 2px solid #FAFAFA;
height: 30px;
}
.btn_cont_right .btn {
display: inline-block;
position: absolute;
float: left;
width: 141px;
height: 0;
cursor: pointer;
}
.btn_cont_right .btn:nth-child(1):before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
border-top: 30px solid #b71c1c;
border-right: 20px solid transparent;
border-bottom: 0px solid transparent;
border-left: 0px solid #b71c1c;
}
.btn_cont_right .btn:hover:nth-child(1):before {
border-top: 30px solid #FAFAFA;
color: #b71c1c;
}
.btn_cont_right .btn:nth-child(2) {
right: 0;
}
.btn_cont_right .btn:nth-child(2):before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 100%;
border-top: 0px solid transparent;
border-right: 0px solid #b71c1c;
border-bottom: 30px solid #b71c1c;
border-left: 20px solid transparent;
}
.btn_cont_right .btn:hover:nth-child(2):before {
border-bottom: 30px solid #FAFAFA;
color: #b71c1c;
}
.btn_cont_right .btn:nth-child(2):after {
content: "";
position: absolute;
height: 39px;
top: -4px;
right: 150px;
border-right: 2px solid #FAFAFA;
transform: rotate(34deg) translateZ(0px);
}
.btn_cont_right .btn span {
position: relative;
float: left;
top: 7px;
width: 100%;
height: auto;
text-align: center;
color: #FAFAFA;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
margin: 0;
padding: 0;
}
.btn_cont_right .btn:hover span {
color: #b71c1c;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css" rel="stylesheet" />
<div class="btn_cont_left">
<div class="btn">
<span>BTN 1</span>
</div>
<div class="btn">
<span>BTN 2</span>
</div>
</div>
<div class="btn_cont_right">
<div class="btn">
<span>BTN 1</span>
</div>
<div class="btn">
<span>BTN 2</span>
</div>
</div>
<div class="btn_cont_left">
<div class="btn">
<span>BTN 1</span>
</div>
<div class="btn">
<span>BTN 2</span>
</div>
</div>
<div class="btn_cont_right">
<div class="btn">
<span>BTN 1</span>
</div>
<div class="btn">
<span>BTN 2</span>
</div>
</div>