如何在外部的外部和倾斜边缘上创建带有圆形边缘的切换按钮

Question

我对创建此切换的JavaScript部分还可以，但是CSS部分让我头痛，尤其是处理边界。

我想知道编码此元素的最佳方法：元素模型

Answer 1

通过使用Border-radius，Transform：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;
}