css实现角标效果并带有文章或图标

默默地写代码2025-06-20 12:46

代码示例：

css 复制代码

.coupon_card.active {
    border: 1px solid #f32121;
    position: relative;
}
.coupon_card.active::after {
    content: '';

    position: absolute;
    right: 0;
    bottom: 0;
    border-width: 0 0 20px 20px;
    border-style: solid;
    border-color: transparent transparent #f32121;

}
.coupon_card.active::before {
        content: '';
        position: absolute;
        width: 10px;
        height: 6px;
        background: transparent;
        bottom: 4px;
        right: 2px;
        border: 2px solid white;
        border-top: none;
        border-right: none;
        -webkit-transform: rotate(-55deg);
        -ms-transform: rotate(-55deg);
        transform: rotate(-55deg);
        z-index: 9;
 }

效果图：