2つのタブで斜めの中央の境界線を作成するには

Question

それぞれが50％の幅を持つ2つの切り替えタブを持っています。どちらもクリック可能なタブです。タブの中間の境界線を傾けて配置する必要があります。私はスキュープロパティで試してみました。しかし、タブ内のテキストも歪んでいます。私はどのように傾斜中間の境界を達成するのですか？ちょうど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のようないくつかの擬似要素を追加することによって、それを行うと、それに背景との境界線を追加することができ、より詳細

.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