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

news/2024/11/1 10:29:35/

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

效果图:

实现流程:

 =》

=》

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

边框小程序HTML
border2px solid #ee6f071px 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


http://www.ppmy.cn/news/1543554.html

相关文章

Android——动态注册广播

BroadcastReceiver 发送一条广播&#xff0c;可以被不同的广播接收者所接收&#xff0c;广播接收者收到广播后再进行逻辑判断。 标准广播 通过 new BroadcastReceiver() 创建广播 通过 registerReceiver() 注册广播 通过 sendBroadcast() 发送广播 通过 unregisterReceiver(…

LSTM——长短期记忆神经网络

目录 1.LSTM 工作原理 2.LSTM的代码实现 3.代码详解 LSTM&#xff08;Long Short-Term Memory&#xff09;是一种特殊的循环神经网络&#xff08;RNN&#xff09;&#xff0c;用于解决长序列中的长期依赖问题。它通过引入门机制&#xff0c;控制信息的流入、保留和输出&…

Spring Boot框架下校园社团信息管理的创新实践

2相关技术 2.1 MYSQL数据库 MySQL是一个真正的多用户、多线程SQL数据库服务器。 是基于SQL的客户/服务器模式的关系数据库管理系统&#xff0c;它的有点有有功能强大、使用简单、管理方便、安全可靠性高、运行速度快、多线程、跨平台性、完全网络化、稳定性等&#xff0c;非常…

练习LabVIEW第二十八题

学习目标&#xff1a; 刚学了LabVIEW&#xff0c;在网上找了些题&#xff0c;练习一下LabVIEW&#xff0c;有不对不好不足的地方欢迎指正&#xff01; 第二十八题&#xff1a; 建立一个VI&#xff0c;模拟滚动—个骰子(骰子取值1~6)&#xff0c;跟踪骰子滚动后的取值出现次数…

Router和route区别

Router和route在Vue.js框架中扮演着不同的角色&#xff0c;它们有着很大的区别&#xff1a; 一、定义与概念 1、Router&#xff1a; Vue Router是Vue.js官方提供的一种路由管理器&#xff0c;它是一个Vue.js插件。 Router用于管理应用程序的路由规则和状态&#xff0c;包括…

使双向链表的迭代器和vector一样支持加法和减法。

例子&#xff1a; int main() { vector<int> vec { 1,2,3,4,5,7,8,9 };auto n alg.find_binary_insert_pos(vec.begin(), vec.end(), 6);vec.insert(vec.begin() n, 6);_pn(vec);list<int> vec2 { 1,10,11,9,5 };for (auto& v : vec2) {//添加不存在的…

uniapp app.onshow 和 onMounted一样用吗

在uni-app中&#xff0c;onShow和onMounted并不完全相同&#xff0c;它们分别属于应用生命周期和组件生命周期。‌ 应用生命周期中的onShow 在uni-app中&#xff0c;onShow是应用生命周期的一部分&#xff0c;它会在应用启动或从后台进入前台时触发。这意味着它不仅仅局限于页…

Puppeteer 与浏览器版本兼容性:自动化测试的最佳实践

Puppeteer 支持的浏览器版本映射&#xff1a;从 v20.0.0 到 v23.6.0 自 Puppeteer v20.0.0 起&#xff0c;这个强大的自动化库开始支持与 Chrome 浏览器的无头模式和有头模式共享相同代码路径&#xff0c;为自动化测试带来了更多便利。从 v23.0.0 开始&#xff0c;Puppeteer 进…