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

序:稍一看,挺好看,看也简单,实现起来应该也是一样,没什么难度,分分钟完成。后面将其他的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.rhkb.cn/news/460922.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

DDRPHY数字IC后端设计实现系列专题之后端设计导入,IO Ring设计

本章详细分析和论述了 LPDDR3 物理层接口模块的布图和布局规划的设计和实 现过程&#xff0c;包括设计环境的建立&#xff0c;布图规划包括模块尺寸的确定&#xff0c;IO 单元、宏单元以及 特殊单元的摆放。由于布图规划中的电源规划环节较为重要&#xff0c; 影响芯片的布线资…

几种因素对磁控溅射AlN薄膜择优取向的影响

几种因素对磁控溅射AlN薄膜择优取向的影响 AlN材料在微电子产业中有广泛的应用&#xff0c;AlN薄膜在多种器件中都扮演着重要角色。 晶体生长中的择优取向是指在多晶材料中&#xff0c;晶粒沿着某一特定晶向或晶面生长得更快或更优先的现象。这种取向通常与材料的制备工艺和生长…

基于Java SpringBoot和Vue社区医院诊所医疗挂号管理系统设计

摘要 本文旨在设计并实现一个基于Java SpringBoot和Vue的社区医院管理系统&#xff0c;以解决当前社区医院管理中存在的效率低下、数据安全性差等问题。通过采用前后端分离架构&#xff0c;系统实现了用户信息管理、挂号管理、医生管理等功能模块&#xff0c;有效提升了医院的…

Linux 基础io_ELF_虚拟物理地址_动态库加载

1.可执行程序格式 ELF [wwshcss-ecs-178e myshell]$ ll total 56 -rw-rw-r-- 1 wws wws 92 Oct 17 19:14 file -rw-rw-r-- 1 wws wws 82 Oct 12 16:51 makefile -rw-r--r-- 1 wws wws 90 Oct 17 19:13 myfile -rwxrwxr-x 1 wws wws 20128 Oct 16 21:02 myshell -rw-r…

Java如何实现PDF转高质量图片

大家好&#xff0c;我是 V 哥。在Java中&#xff0c;将PDF文件转换为高质量的图片可以使用不同的库&#xff0c;其中最常用的库之一是 Apache PDFBox。通过该库&#xff0c;你可以读取PDF文件&#xff0c;并将每一页转换为图像文件。为了提高图像的质量&#xff0c;你可以指定分…

【HarmonyOS NEXT】使用 Navigation 对折叠屏设备页面进行分栏展示,优化 UI 交互

关键词&#xff1a;折叠屏、navigation、router、路由、分栏、UI 随着科技的发展&#xff0c;手机设备形态也由一面屏向多面屏进行发展&#xff0c;那么软件的UI适配也面临着问题&#xff0c;本篇文章主要解决大屏设备的页面 UI 适配问题&#xff0c;如折叠屏&#xff0c;平板&…

Coppelia Sim (v-REP)仿真 机器人3D相机手眼标定与实时视觉追踪 (二)

coppelia sim[V-REP]仿真实现 机器人于3D相机手眼标定与实时视觉追踪 二 zmq API接口python调用python获取3D相机的数据获取彩色相机的数据获取深度相机的数据用matpolit显示 python控制机器人运动直接控制轴的位置用IK运动学直接移动到末端姿态 相机内参的标定记录拍照点的位置…

Linux 安装nacos

1.下载版本 https://github.com/alibaba/nacos/tags 2.解压压缩包&#xff0c;启动 (1)将压缩包放到/usr/local目录下&#xff0c;解压 tar -xvf nacos-server-2.0.0-BETA.tar.gz(2)删除压缩包 rm -f nacos-server-2.0.0-BETA.tar.gz(3) 找到nacos的mysql的数据库脚本,在数…

sqoop问题汇总记录

此篇博客仅记录在使用sqoop时遇到的各种问题。持续更新&#xff0c;有问题评论区一起探讨&#xff0c;写得有不足之处见谅。 Oracle_to_hive 1. main ERROR Could not register mbeans java.security.AccessControlException: access denied ("javax.management.MBeanTr…

基于微信小程序的小区管理系统设计与实现(lw+演示+源码+运行)

摘 要 社会发展日新月异&#xff0c;用计算机应用实现数据管理功能已经算是很完善的了&#xff0c;但是随着移动互联网的到来&#xff0c;处理信息不再受制于地理位置的限制&#xff0c;处理信息及时高效&#xff0c;备受人们的喜爱。所以各大互联网厂商都瞄准移动互联网这个潮…

window11使用wsl2安装Ubuntu22.04

目录 1、快速了解wsl2 安装子系统linux流程&#xff08;B站视频&#xff09; 2、wsl2常用命令 3、windows与子系统Linux文件访问方法 4、子系统linux使用windows网络代理、网络配置&#xff08;镜像网络&#xff0c;非NAT&#xff09; 5、wsl2 Ubuntu miniconda 安装 6、…

【K8S系列】Kubernetes 中 NodePort 类型的 Service 无法访问的问题【已解决】

在 Kubernetes 中&#xff0c;NodePort 类型的 Service 允许用户通过每个节点的 IP 地址和指定的端口访问应用程序。如果 NodePort 类型的 Service 无法通过节点的 IP 地址和指定端口进行访问&#xff0c;可能会导致用户无法访问应用。本文将详细分析该问题的常见原因及其解决方…

Cyber​​Panel filemanager/upload 远程命令执行漏洞复现

0x01 产品简介 CyberPanel是一个开源的Web控制面板,它提供了一个用户友好的界面,用于管理网站、电子邮件、数据库、FTP账户等。CyberPanel旨在简化网站管理任务,使非技术用户也能轻松管理自己的在线资源。 0x02 漏洞概述 该漏洞源于filemanager/upload接口未做身份验证和…

(C#面向初学者的 .NET 的生成 AI) 第 2 部分-什么是 AI 和 ML?

从本部分开始Luis Quintanilla介绍AI和机器学习&#xff0c;需要学习的一些东西是什么是AI和ML&#xff1f;作为一名.net开发人员如何学习使用AI和ML。 1、首先什么是AI 和 ML&#xff1f; 你可以把它看作是基本相同事物的不同层次。 在顶层的是AI&#xff08;人工智能&#xf…

Swarm-LIO: Decentralized Swarm LiDAR-inertial Odometry论文翻译

文章目录 前言一、介绍二、相关工作三、方法A. 问题表述B. 框架概述C. 群体系统的初始化D. 去中心化激光雷达-惯性状态估计 四. 实验A. 室内飞行B. 退化环境飞行C. 去中心化部署 五. 结论和未来工作 前言 原文&#xff1a;原文 准确的自我状态和相对状态估计是完成群体任务的关…

wsl 使用docker 部署oracle11g数据库

wsl 使用docker 部署oracle11g数据库 1. 下载oracle11g sudo docker pull registry.cn-hangzhou.aliyuncs.com/helowin/oracle_11g2. 运行oracle11g容器&#xff08;docker-compose&#xff09; services:oracle-1.0:container_name: oracle11gimage: oracle11g:1.0restart:…

IDEA集成JProfiler

目录 下载并安装JProfiler下载安装包管理员身份运行配置许可证邮箱复制注册码配置永久许可证选择IDE集成 在IDEA中下载并安装JProfiler插件启动并使用JProfiler进行性能分析启动Java应用程序&#xff1a;自动运行JProfiler 知识扩充功能 下载并安装JProfiler 下载安装包 官网…

Tomcat 和 Docker部署Java项目的区别

在 Java 项目部署中&#xff0c;Tomcat 和 Docker 是两种常见的选择。虽然它们都可以用来运行 Java 应用&#xff0c;但它们在定位、部署方式、依赖环境、资源隔离、扩展性和适用场景等方面有显著区别。 1. 功能定位 1.1 Tomcat Apache Tomcat 是一种轻量级的 Java 应用服务器…

AI-基本概念-多层感知器模型/CNN/RNN/自注意力模型

1 需求 神经网络 …… 深度学习 …… 深度学习包含哪些神经网络&#xff1a; 全连接神经网络卷积神经网络循环神经网络基于注意力机制的神经网络 2 接口 3 CNN 在这个示例中&#xff1a; 首先定义了一个简单的卷积神经网络SimpleCNN&#xff0c;它包含两个卷积层、两个池…

Leaflet查询矢量瓦片偏移的问题

1、问题现象 使用Leaflet绘制工具查询出来的结果有偏移 2、问题排查 1&#xff09;Leaflet中latLngToContainerPoint和latLngToLayerPoint的区别 2&#xff09;使用Leaflet查询需要使用像素坐标 3&#xff09;经排查发现&#xff0c;container获取的坐标是地图容器坐标&…