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>