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

如何在外侧和内侧的倾斜边缘上创建具有圆边的切换按钮？

1 个答案: