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>
这是我花了三百六十五天二十四小时六十分六十秒才成功写出来的,太难了,救救鞋子吧!回到宿舍都不敢光着脚走路,只能睡觉的时候光着,太难了!
这是我放在codepen.io上的例子:https://codepen.io/nicefutrue/pen/oNKGjmZ