css 对称按钮，中间斜平行间隔，两头半圆

序：稍一看，挺好看，看也简单，实现起来应该也是一样，没什么难度，分分钟完成。后面将其他的UI做了七七八八后，到这个按钮的时候，不知怎么，突然卡机了，想不起来怎么实现了，按正常按钮来直接一个div套两个div加点样式就完事了，可这货还有一层；想起来后，把我气的，记录一下吧！

效果图：

实现流程：

 =》

=》

本来是在小程序上实现的，现在放到html里，在HTML上有一个小bug，2px的边框没有很好的重合，也就懒的去调了

边框	小程序	HTML
border	2px solid #ee6f07	1px solid #ee6f07

啊，这个，我是为了凑些字数的，知道就不写这么详细了，反正也没人看，都是自我记录，我看的懂就行，题目应该写骚包的按钮样式，下次就应该这么干；

嗯！下次估计也就忘记了这次写了什么了；

不行，写得多了会长脑子的，让本就不聪明的脑子就更聪明，变成了机灵鬼了，看你怎么办；

凉拌啊！凉拌猪耳，让你听风就是雨；

啊不是！这不是拿来看的吗？怎么就扯到这么远了，这是来干嘛的；

这不是写一个骚包的按钮的吗？

骚什么，包你的头的按钮，这是对称按钮，中间斜平行，两端半圆；

整天就会啊吱啊嘬，么事马做；

好好，废话不多说，马上就上文。

<style>.flex{display: flex;width: 90%;margin: 120px auto 0;justify-content: center;align-items: center;}.item{position: relative;height: 48px;width:calc(50% - 120px);border: 1px solid #ee6f07;margin: 0 5px;box-sizing: border-box;transform: skewX(-20deg);}.item:first-child{border-left-width: 0;border-radius: 0 6px 6px 0;}.item:last-child{border-right-width: 0;border-radius: 6px 0 0 6px;}.item .text{width:120%;height: 48px;position: relative;top:-1px;box-sizing: border-box;display: inline-flex;justify-content: center;align-items: center;transform: skewX(20deg);}.item:first-child .text{left:-30%;padding: 0 10% 0 20%;border: 1px solid #ee6f07;border-right-width: 0;border-radius: 30px 0 0 30px;}.item:last-child .text{left: 10%;padding: 0 20% 0 10%;border: 1px solid #ee6f07;border-left-width: 0;border-radius: 0 30px 30px 0}/* 选中 */.active.item:first-child{background: linear-gradient(to left, #ee6f07 30px, #fff 30px);border-radius: 30px 6px 6px 30px;}.active.item:last-child{background: linear-gradient(to right, #ee6f07 30px, #fff 30px);border-radius: 6px 30px 30px 6px;}.active .text{background-color: #ee6f07;color: #fff;}}
</style><div class="flex"><div class="item active"><div class="text">首页</div></div><div class="item"><div class="text">设置</div></div>
</div>

这是我花了三百六十五天二十四小时六十分六十秒才成功写出来的，太难了，救救鞋子吧！回到宿舍都不敢光着脚走路，只能睡觉的时候光着，太难了！