vue3 使用css实现一个弧形选中角标样式

文章目录

  • 1. 实现效果
  • 2. 实现demo

在前端开发中,ui同学经常会设计这样的样式,用于区分选中的状态
下面抽空简单些了一下,记录下,后面直接复制用

1. 实现效果

  1. 实现一个菜单切换,右下角有个角标的样式

请添加图片描述

2. 实现demo

  1. 主要是通过 伪类线性渐变 属性实现
<script setup lang="ts">let index = ref(1);let tabsList = ref([{ tabName: "登录", key: 1 },{ tabName: "注册", key: 2 }]);const openTab = (key: number) => {index.value = key;};
</script><template><div class="tabs"><span :class="['tab', item.key == index && 'active']" @click="openTab(item.key)" v-for="item in tabsList":key="item.key">{{ item.tabName }}</span></div>
</template><style lang="less" scoped>
.tabs {margin-top: 50px;display: flex;justify-content: center;align-items: center;.tab {display: flex;align-items: center;justify-content: center;color: #fff;width: 150px;height: 40px;border-radius: 10px 10px 0 0;position: relative;background: #ccc;&.active {background: #e74d5c;&::after {content: "";position: absolute;width: 15px;height: 15px;bottom: 0;z-index: 1;}}&:first-child {&::after {right: -15px;background: radial-gradient(circle at 15px 0, transparent 15px, #e74d5c 15px);}}&:last-child {&::after {left: -15px;background: radial-gradient(circle at 0px 0, transparent 15px, #e74d5c 15px);}}}
}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/15721.shtml

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

相关文章

Java进阶学习笔记20——枚举

认识枚举&#xff1a; 枚举是一种特殊的类。 枚举类的格式&#xff1a; 说明&#xff1a; 第一行是罗列枚举的对象名称。只能写合法的标识符&#xff08;名称&#xff09;&#xff0c;多个名称用逗号隔开。 这些名称本质上都是常量&#xff0c;每个变量都会记住枚举类的一个…

Optica数据库 (原OSA美国光学学会电子期刊)文献去哪里查找下载

Optica&#xff08;OSA&#xff09;数据库涵盖了光学和光子学理论研究和实际应用的各个领域&#xff0c;包括&#xff1a;光学设备、光学成像、光纤通信、分析方法、光通信、光纤、半导体激光、光传输、光学系统、计量学、带宽、量子电子学。 该库包括18种学会期刊&#xff08…

MVCC 原理分析、MySQL是如何解决幻读的

文章目录 一、前言回顾1.1 事务四大特性ACID1.2 并发事务问题1.3 事务隔离级别 二、MVCC2.1 为什么使用MVCC2.2 基本概念——当前读、快照读、MVCC2.2.1 当前读2.2.2 快照读2.2.3 MVCC 2.3 隐藏字段—— TRX_ID、ROLL_PTR2.4 undo log2.4.1 介绍2.4.2 版本链 2.5 Read View读视…

/audio~ 前端音浪来袭:HTML音频视频标签的深度探索

&#x1f3a5;/audio~ 前端音浪来袭&#xff1a;HTML音频&视频标签的深度探索 &#x1f31f;音频标签 <audio>&#xff1a;让网页唱起歌来基础搭建&#xff1a;让音乐飘扬进阶魔法&#xff1a;自定义音频体验安全与性能并重 &#x1f39e;️视频标签 <video>&a…

python写接口性能测试

import time import requestsdef measure_response_time(api_url):try:start_time time.time()response requests.get(api_url, timeout10) # 设置超时时间为10秒end_time time.time()response_time end_time - start_timeprint(f"接口 {api_url} 的响应时间为&#…

Oracle如何定位消耗资源最多的sql

Oracle中定位消耗资源最多的SQL语句是性能调优的重要步骤之一。以下是一些方法和步骤&#xff0c;可以帮助你定位这些SQL语句&#xff1a; 使用Oracle的自动工作负载存储库&#xff08;AWR&#xff09;&#xff1a; AWR是Oracle提供的一个性能诊断工具&#xff0c;它定期收集…

读书笔记-Java并发编程的艺术-第1章 并发编程的挑战

文章目录 1.1 上下文切换1.1.1 多线程一定快吗1.1.2 如何减少上下文切换 1.2 死锁1.3 资源限制的挑战 1.1 上下文切换 即时是单核处理器也支持多线程执行代码&#xff0c;CPU通过给每个线程分配CPU时间片来实现这个机制。时间片是CPU分配给多个线程的时间&#xff0c;因为时间…

探索大模型技术:AI的未来与挑战

随着人工智能技术的飞速发展&#xff0c;大模型技术已经成为推动AI领域进步的关键力量。在《中国人工智能系列白皮书——大模型技术&#xff08;2023 版&#xff09;》中&#xff0c;我们得以一窥这一领域的全貌&#xff0c;从技术演进到行业应用&#xff0c;再到伴随而来的安全…

C++拓展之scanf和printf

scanf和printf&#xff0c;这东西&#xff0c;说难也不难&#xff0c;可一旦深入学&#xff0c;学两天都可能学不完。 为了输入输出&#xff0c;我们要把这些占位符学一学。 我们来看看AI是怎么回答的。 Q&#xff1a;C格式化占位符有哪些&#xff1f; A&#xff1a;C中常用的…

【手把手带你搓组件库】从零开始实现Element Plus

从零开始实现Element Plus 前言亮点项目搭建1、创建项目初始化monorepo创建 .gitignore目录结构安装基础依赖配置文件创建各个分包入口utilscomponentscoreplaytheme 2、创建VitePress文档3、部署到Github Actions生成 GH_TOKENGitHub Page 演示 4、总结 前言 在本文中&#xf…

面向可复用性和可维护性的设计模式 课程学习总结

什么是设计模式 设计模式&#xff1a;在软件设计中给定上下文中常见问题的通用的、可重用的解决方案。 设计模式分类 1. 创建型模式——Creational patterns 关注对象创建的过程 1.1 工厂方法模式 定义用于创建对象的接口&#xff0c;但让子类决定要实例化哪个类。工厂方…

4.Redis之Redis的通用命令

0.Redis 实战操作 通过 redis-cli 客户端和 redis 服务器交互 涉及到很多的 redis 的命令 【redis 的命令非常非常多!!! 1.掌握常用命令(多操作多练习) 2.学会使用 redis 的文档-> 阅读文档, 是程序猿的基操!! redis 的命令非常非常多!!! 1.掌握常用命令(多操作多练习…

部署CNI网络组件+k8s多master集群部署+负载均衡

一、环境部署 主机服务 192.168.91.5 K8S集群master01192.168.91.8 K8S集群master02192.168.91.6K8S集群node01192.168.91.7K8S集群node02192.168.91.9 负载均衡nginxkeepalive01&#xff08;master&#xff09;192.168.91.10 负载均衡nginxkeepalive02&#xff08;backup&am…

编程实战:自己编写HTTP服务器(系列3:处理框架)

初级代码游戏的专栏介绍与文章目录-CSDN博客 我的github&#xff1a;codetoys&#xff0c;所有代码都将会位于ctfc库中。已经放入库中我会指出在库中的位置。 这些代码大部分以Linux为目标但部分代码是纯C的&#xff0c;可以在任何平台上使用。 系列入口&#xff1a;编程实战…

TypeScript学习日志-第三十二天(infer关键字)

infer关键字 一、作用与使用 infer 的作用就是推导泛型参数&#xff0c;infer 声明只能出现在 extends 子语句中&#xff0c;使用如下&#xff1a; 可以看出 已经推导出类型是 User 了 二、协变 infer 的 协变会返回联合类型&#xff0c;如图&#xff1a; 三、逆变 infer…

pikachu靶场中的CSRF、SSRF通关

目录 1、CSRF介绍 2、CSRF&#xff08;get&#xff09; 3、CSRF&#xff08;post&#xff09; 4、CSRF Token 5、SSRF介绍 6、SSRF&#xff08;curl&#xff09; 7、SSRF&#xff08;file_get-content&#xff09; 8、CSRF与SSRF的区别 最近在学习CSRF、SSRF漏洞&#…

Haskell 的高阶函数(Higher-order functions)

本节继续介绍Haskell的知识&#xff0c;本节内容介绍的是高阶函数&#xff08;Higher-order functions&#xff09;的概念和应用。高阶函数是指能够接受其他函数作为参数&#xff0c;或者返回函数作为结果的函数。 Functions as values&#xff08;函数作为值&#xff09;&…

Boyer-Moore投票算法

摩尔投票法&#xff0c;又称为博耶-摩尔多数投票算法&#xff0c;是一种用于在一组数据中寻找多数元素(出现次数超过一半的元素)的算法。该算法的效率非常高&#xff0c;时间复杂度为O(n)&#xff0c;空间复杂度为O(1)&#xff0c;适合处理大数据量的情况。 步骤 首先定义两个…

飞机大战游戏实现揭秘

新书上架~&#x1f447;全国包邮奥~ python实用小工具开发教程http://pythontoolsteach.com/3 欢迎关注我&#x1f446;&#xff0c;收藏下次不迷路┗|&#xff40;O′|┛ 嗷~~ 目录 一、游戏概览与核心玩法 二、游戏模块详解 1. 游戏主循环模块 2. 创建初始化模块 三、关…

【pytorch】关于OpenCV和PIL.Image读取图片的区别

数据使用方角度 首先从pytorch出发&#xff0c;torchvision.transforms()要求传入的图像是PIL.Image格式&#xff08;通道要求是RGB格式的&#xff09;&#xff0c;另外模型处理输入要转换为[1,channel,H,W]&#xff1b; 所以最终导入torchvision.transforms()的图像格式需要转…