vue3 使用css实现一个弧形选中角标样式
文章目录
- 1. 实现效果
- 2. 实现demo
在前端开发中，ui同学经常会设计这样的样式，用于区分选中的状态
下面抽空简单些了一下，记录下，后面直接复制用
1. 实现效果
- 实现一个菜单切换，右下角有个角标的样式
2. 实现demo
- 主要是通过
伪类和线性渐变属性实现
<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>