css实现卡片的左上角有一个三角形的遮盖效果

需求:

卡片的左上角有一个绿色的三角形标签,用来区分状态

实现:

复制代码
.vCard{
  position: relative;
  overflow: hidden;
}
.vCard::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-bottom: 20px solid transparent;
  border-left: 20px solid #09BDBD; /* 根据需要设置颜色 */
}

<templete>
<div  class="vCard">
.........
</div>

</templete>
相关推荐
饮茶三千28 分钟前
几个在开发中起大作用的CSS新特性!
前端·css
前端开发与ui设计的老司机4 小时前
从数据洞察到设计变革:UI前端如何利用数字孪生重塑用户体验?
ui·ux
十盒半价4 小时前
Stylus 伪元素:让 CSS 玩出 “无中生有” 的新花样
前端·css·trae
前端开发与ui设计的老司机5 小时前
大数据时代UI前端的智能化升级:基于机器学习的用户意图预测
大数据·ui
Savior`L7 小时前
CSS知识复习5
前端·css
Liudef0612 小时前
儿童趣味记忆配对游戏
css·游戏·css3
前端开发与ui设计的老司机14 小时前
从UI设计到数字孪生实战:构建智慧教育的个性化学习平台
学习·ui
前端世界16 小时前
鸿蒙UI开发全解:JS与Java双引擎实战指南
javascript·ui·harmonyos
吉吉安20 小时前
两张图片对比clip功能
javascript·css·css3
快起来别睡了1 天前
CSS 层叠上下文:从“谁在前,谁在后”说起
css