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

文章目录

  • [1. 实现效果](#1. 实现效果)
  • [2. 实现demo](#2. 实现demo)

在前端开发中,ui同学经常会设计这样的样式,用于区分选中的状态

下面抽空简单些了一下,记录下,后面直接复制用

1. 实现效果

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

2. 实现demo

  1. 主要是通过 伪类线性渐变 属性实现
html 复制代码
<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>
相关推荐
老兵发新帖10 分钟前
pnpm常见报错解决办法
前端
Sonetto199918 分钟前
Nginx 反向代理,啥是“反向代理“啊,为啥叫“反向“代理?而不叫“正向”代理?它能干哈?
运维·前端·nginx
沐土Arvin18 分钟前
理解npm的工作原理:优化你的项目依赖管理流程
开发语言·前端·javascript·设计模式·npm·node.js
好_快34 分钟前
Lodash源码阅读-baseUniq
前端·javascript·源码阅读
不秃的开发媛35 分钟前
前端技术Ajax入门
java·开发语言·前端
牧羊狼的狼39 分钟前
React.memo 和 useMemo
前端·javascript·react.js
xixixin_1 小时前
【uniapp】vue2 搜索文字高亮显示
java·服务器·前端·uni-app·交互·文字高亮
还是鼠鼠1 小时前
Android移动应用开发入门示例:Activity跳转界面
android·前端·gitee·android studio·android-studio
不知疲倦的仄仄1 小时前
跨域 同源策略通俗讲解
前端·后端·spring·edge浏览器
珹洺1 小时前
Jsp技术入门指南【十】IDEA 开发环境下实现 MySQL 数据在 JSP 页面的可视化展示,实现前后端交互
java·运维·前端·mysql·intellij-idea·jsp