需求:
卡片的左上角有一个绿色的三角形标签,用来区分状态文章来源:https://www.toymoban.com/news/detail-625146.html
实现:文章来源地址https://www.toymoban.com/news/detail-625146.html
.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>
到了这里,关于css实现卡片的左上角有一个三角形的遮盖效果的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!