内側の丸みのあるエッジと内側の傾斜したエッジを持つトグルボタンを作成するにはどうすればよいですか？

Question

このトグルを作成するJavaScriptの部分は問題ありませんが、CSSの部分は私に頭痛を与えています。特に境界を扱っています。

私は、この要素をコーディングするための最良の方法を知りたいのですが：、国境半径の組み合わせを使用することによりElement Mockup

Answer 1

変換：skewX値とpseduo要素あなたがこの結果を達成することができるはずです。など、パディング、高さの値をいじくり回すこと自由に感じ

https://codepen.io/partypete25/pen/ZyvqKz

<button class="btn btn-left">Button</button><button class="btn btn-right">Button</button> 

.btn { 
    height:40px; 
    padding:10px 40px; 
    border:0; 
    margin:0; 
    position:relative; 
} 
.btn-left { 
    border-radius:20px 0 0 20px; 
    background:yellow; 
} 
.btn-left:after { 
    content:''; 
    width:20px; 
    margin-left:-10px; 
    top:0; 
    height:100%; 
    background:yellow; 
    display:inline-block; 
    z-index:1; 
    -ms-transform: skewX(-20deg); 
    -webkit-transform: skewX(-20deg); 
    transform: skewX(-20deg); 
    position:absolute; 
    left:100%; 
} 
.btn-right { 
    border-radius:0 20px 20px 0; 
    background:white; 
    margin-left:20px; 
    border:2px solid #eee; 
} 
.btn-right:before { 
    content:''; 
    width:20px; 
    margin-left:-11px; 
    top:-2px; 
    height:100%; 
    background:white; 
    display:inline-block; 
    z-index:1; 
    -ms-transform: skewX(-20deg); 
    -webkit-transform: skewX(-20deg); 
    transform: skewX(-20deg); 
    position:absolute; 
    left:0; 
    border-top:2px solid #eee; 
    border-bottom:2px solid #eee; 
    border-left:2px solid #eee; 
}