需求:
卡片的左上角有一個(gè)綠色的三角形標(biāo)簽,用來區(qū)分狀態(tài)文章來源：http://www.zghlxwxcb.cn/news/detail-625146.html
實(shí)現(xiàn):文章來源地址http://www.zghlxwxcb.cn/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; /* 根據(jù)需要設(shè)置顏色 */
}
<templete>
<div class="vCard">
.........
</div>
</templete>
到了這里，關(guān)于css實(shí)現(xiàn)卡片的左上角有一個(gè)三角形的遮蓋效果的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
