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

文章目录

• [1. 实现效果](#1. 实现效果)
• [2. 实现demo](#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>