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>
相关推荐
行云&流水5 分钟前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
Sally璐璐12 分钟前
零基础学HTML和CSS:网页设计入门
前端·css
老虎062720 分钟前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
灿灿1213834 分钟前
CSS 文字浮雕效果:巧用 text-shadow 实现 3D 立体文字
前端·css
烛阴1 小时前
Babel 完全上手指南:从零开始解锁现代 JavaScript 开发的超能力!
前端·javascript
AntBlack1 小时前
拖了五个月 ,不当韭菜体验版算是正式发布了
前端·后端·python
31535669131 小时前
一个简单的脚本,让pdf开启夜间模式
前端·后端
尘心cx1 小时前
前端-CSS-day1
前端·css
知否技术1 小时前
前端常说的 SCSS是个啥玩意?一篇文章给你讲的明明白白!
前端·scss
CN-Dust2 小时前
[FMZ][JS]第一个回测程序--让时间轴跑起来
javascript