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>