【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>
相关推荐
m0_748230945 分钟前
Rust赋能前端: 纯血前端将 Table 导出 Excel
前端·rust·excel
qq_5895681013 分钟前
Echarts的高级使用,动画,交互api
前端·javascript·echarts
黑客老陈1 小时前
新手小白如何挖掘cnvd通用漏洞之存储xss漏洞(利用xss钓鱼)
运维·服务器·前端·网络·安全·web3·xss
正小安1 小时前
Vite系列课程 | 11. Vite 配置文件中 CSS 配置(Modules 模块化篇)
前端·vite
暴富的Tdy2 小时前
【CryptoJS库AES加密】
前端·javascript·vue.js
neeef_se2 小时前
Vue中使用a标签下载静态资源文件(比如excel、pdf等),纯前端操作
前端·vue.js·excel
m0_748235612 小时前
web 渗透学习指南——初学者防入狱篇
前端
z千鑫2 小时前
【前端】入门指南:Vue中使用Node.js进行数据库CRUD操作的详细步骤
前端·vue.js·node.js