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>
相关推荐
回忆哆啦没有A梦2 小时前
Vue页面回退刷新问题解决方案:利用pageshow事件实现缓存页面数据重置
前端·vue.js·缓存
A_ugust__3 小时前
vue3+ts 封装跟随弹框组件,支持多种模式【多选,分组,tab等】
前端·javascript·vue.js
林九生3 小时前
【Vue3】v-dialog 中使用 execCommand(‘copy‘) 复制文本失效的原因与解决方案
前端·javascript·vue.js
yi碗汤园3 小时前
【一文了解】C#的StringSplitOptions枚举
开发语言·前端·c#
cxr8284 小时前
BMAD框架实践:掌握story-checklist提升用户故事质量
前端·人工智能·agi·智能体·ai赋能
emma羊羊5 小时前
【xsslabs】第12-19关
前端·javascript·靶场·xss
Larry_Yanan7 小时前
QML学习笔记(十七)QML的属性变更信号
javascript·c++·笔记·qt·学习·ui
真的想不出名儿7 小时前
vue项目引入字体
前端·javascript·vue.js
胡楚昊7 小时前
Polar WEB(1-20)
前端
吃饺子不吃馅8 小时前
AntV X6图编辑器如何实现切换主题
前端·svg·图形学