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);min-width: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 30%, #fff 30%);border-radius: 30px 6px 6px 30px;}
	.active.item:last-child{background: linear-gradient(to right, #ee6f07 30%, #fff 30%);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>

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

这是我放在codepen.io上的例子：https://codepen.io/nicefutrue/pen/oNKGjmZ