Как создать наклонную среднюю границу с двумя вкладками

Question

У меня есть две перекладины с каждой шириной 50%. Оба являются интерактивными вкладками. Средняя граница вкладок должна быть скошенной. Я попробовал перекос. Но текст внутри вкладки также искажается. Как достичь скошенной средней границы. Есть ли все равно, чтобы достичь с помощью только границ css?

.toggleBtnRight { 
    border: 1px solid white; 
    background: none; 
    font-family: 'Futura LT BOLD' !important; 
    color: #005695; 
    font-size: 0.7em; 
    text-align: center; 
    margin: auto; 
    float: right; 
    font-weight: bolder; 
    padding-top: 10px; 
    padding-bottom: 10px; 
    width: 50%; 
} 
.toggleBtnLeft { 
    border: 1px solid white; 
    background: none; 
    font-family: 'Futura LT BOLD' !important; 
    color: #005695; 
    font-size: 0.7em; 
    text-align: center; 
    margin: auto; 
    float: left; 
    font-weight: bolder; 
    padding-top: 10px; 
    padding-bottom: 10px; 
    width: 50%; 
} 




    .clickedBtn { 
background: #f3f3f5 !important; 
border-bottom: 1px solid #c6c6c7 !important; 
border-left: 1px solid #c6c6c7 !important; 
border-right: 1px solid #c6c6c7 !important; 
} 

Answer 1

Вы можете сделать это, добавив некоторые псевдо элемент, как :before и добавить фон и границы в нем сделать transforms в этом элементе, как

.toggleBtnRight:before { 
    content: ''; 
    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 10px; 
    left: 0; 
    z-index: -1; 
    border: .1em solid #aaa; 
    border-bottom: none; 
    /* border-radius: 10px 10px 0 0; */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(229,229,229,1))); 
    background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); 
    background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(229,229,229,1) 100%); 
    background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); 
    -webkit-transform: perspective(5px) rotateX(2deg); 
    transform: perspective(5px) rotateX(2deg); 
    -webkit-transform-origin: left; 
    transform-origin: left; 
} 

более подробно взглянуть на demo