实现卡片三角形对号选中对号我这里是手写的，可以直接换成图片。结束，拜拜。

直接上效果图：

html

<div class="card card-active">
    <div class="mask">
        <div class="sanjiao"></div>
        <div class="check"></div>
    </div>
    会员卡
</div>

css

.card {
    width: 300px;
    height: 200px;
    border: 1px solid #fafafa;
    border-radius: 4px;
    background: #3196FA;
    margin: 100px auto;
    position: relative;
    text-align: center;
    line-height: 200px;
    color: #fff;
    cursor: pointer;
}

.mask {
    position: absolute;
    top: 0;
    right: 0;
    display: none;
}

.card-active>.mask {
    display: block;
}

.sanjiao {
    width: 0;
    height: 0;
    border-top: 50px solid #EF4864;
    border-left: 50px solid transparent;
}

.check {
    position: absolute;
    top: 5px;
    right: 10px;
    width: 8px;
    height: 16px;
    transform: rotate(45deg);
    border-right: 3px solid #2FC25B;
    border-bottom: 3px solid #2FC25B;
}

const cardEle = document.querySelector('.card');
cardEle.onclick = function () {
    if (cardEle.classList.value.indexOf('card-active') !== -1) {
        cardEle.classList.remove('card-active')
    } else {
        cardEle.classList.add('card-active')
    }
}

对号我这里是手写的，可以直接换成图片。

结束，拜拜。