如何创建外侧为圆边、内侧为斜边的切换按钮？

Question

我可以接受创建此切换的 JavaScript 部分，但 CSS 部分让我很头疼，尤其是处理边框。

我想知道对此元素编码的最佳方式：Element Mockup

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;
}

如何创建外侧为圆边、内侧为斜边的切换按钮？

How do I create toggle buttons with rounded edges on the outsides and slanted edges on the insides?

css

transform

pseudo-element