技术栈

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

图拉呀2023-08-05 13:54

需求:

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

实现:

复制代码
.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>
上一篇:Go语言入门指南|青训营
下一篇:服务器时钟同步
相关推荐
q56731523
3 小时前
Koa+Puppeteer爬虫教程页面设计
javascript·css·爬虫
柚子816
12 小时前
scroll-marker轮播组件不再难
前端·css
凌辰揽月
14 小时前
7月10号总结 (1)
前端·css·css3
天天扭码
15 小时前
很全面的前端面试——CSS篇(上)
前端·css·面试
sunbyte
15 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | DoubleVerticalSlider(双垂直滑块)
前端·javascript·css·vue.js·vue
UI罐头
15 小时前
后台设计指南:系统架构、交互规范与工具实战全流程解析
ui·设计·设计工具
Eighteen Z
16 小时前
CSS揭秘:10.平行四边形
前端·css·css3
嘉琪001
18 小时前
封装一个有最小化的dialog组件
前端·javascript·css
UI前端开发工作室
19 小时前
UI前端与数字孪生融合新领域拓展:智慧教育的虚拟实验室建设
ui
春秋半夏
21 小时前
音乐播放、歌词滚动
前端·css
热门推荐
01【无标题】02集群聊天服务器---MySQL数据库的建立03Coze扣子平台完整体验和实践(附国内和国际版对比)04Java类变量(静态变量)05KGG转MP3工具|非KGM文件|解密音频06扣子(coze)实战|我用扣子搭建了一个自动分析小红薯笔记内容的AI应用|详细步骤拆解07使用Ruby接入实时行情API教程08Java学习第十五部分——MyBatis09DeepSeek各版本说明与优缺点分析10绿色建筑新态势:楼宇自控助力能效提升,推动成本优化新路径