Переключение по диагонали в другую сторону

Question

У меня есть код (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; 

} 

Answer 1

, если вы хотите изменить разделение на противоположную сторону добавить "-" перед 34deg

/

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

\

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

Answer 2

Литтл разные (проще, имхо) подход:

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>

Вы можете настроить параметры немного, но это должно быть близко.

Answer 3

Вы можете просто использовать псевдоселекторы, тогда вам просто нужно поменять правила границ для каждого.

Рабочий пример:

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>