【CSS】实现tag选中对钩样式

样式效果:

代码实现:(纯css,伪类实现)

html 复制代码
<div class="item" v-for="i in 3" :key="i" :class="i===1?'selected':''">{{ i }}</div>


<style>
    .item {
      padding: 6px 12px;
      background-color: #ffffff;
      border: 1px solid #ddd;
      width: 40px;
      margin: 10px;
      text-align: center;
      display: inline-block;

      position: relative;   // 必须有
    }

    .selected {
      border-color: #14BCF5;
    
      &:before {        // 三角形背景
        content: "";
        position: absolute;
        right: 0;
        bottom: 0;
        border: 10px solid #14BCF5;
        border-top-color: transparent;
        border-left-color: transparent;
      }

      &:after {        // 对钩
        content: "";
        width: 6px;
        height: 8px;
        position: absolute;
        right: 3px;
        bottom: 3px;
        border: 1px solid #fff;
        border-top-color: transparent;
        border-left-color: transparent;
        transform: rotate(45deg);
      }
    }
</style>
相关推荐
co松柏5 分钟前
程序员必备——AI 画技术图技巧
前端·后端·ai编程
前端大白话8 分钟前
前端人速码!10个TypeScript神仙技巧,看完直接拿捏项目实战
前端·javascript·typescript
五号厂房9 分钟前
React 异步回调中产生的闭包问题剖析及解决
前端
用户20311966009610 分钟前
GeometryProxy 和 GeometryReader 的区别
前端
前端大白话11 分钟前
前端必看!10个React实战技巧让你代码起飞,附超详细注释
前端·javascript·react.js
bigyoung12 分钟前
使用 Arco Design 的 Table 组件实现可编辑列
前端·react.js·arco design
前端大白话14 分钟前
前端必学!10 个超实用 Vue3 实战技巧大放送
前端·javascript·vue.js
谦谦橘子17 分钟前
手写react-router,理解react-router原理
前端·javascript·react.js
一心只读圣贤书18 分钟前
解决用nodejs本地部署n8n跑npx n8n命令报错的问题
前端
Aphasia31123 分钟前
React 中ref的三种形式
前端·react.js