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

图拉呀

于 2023-08-04 17:08:44 发布

阅读量1.9k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： elemenui vue 文章标签： css ui

本文链接：https://blog.csdn.net/u010328533/article/details/132108556

vue 同时被 2 个专栏收录

16 篇文章

订阅专栏

elemenui

11 篇文章

订阅专栏

文章描述了如何使用CSS样式在卡片的左上角添加一个绿色三角形标签，以标识不同的状态，通过`.vCard`类和`:before`伪元素实现动态定位和颜色定制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求:
在这里插入图片描述
卡片的左上角有一个绿色的三角形标签,用来区分状态

实现:

.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>