IT俱乐部 CSS css实现角标效果并带有文章或图标效果(完整代码)

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;
 }

效果图:

到此这篇关于css实现角标效果并带有文章或图标的文章就介绍到这了,更多相关css角标效果内容请搜索IT俱乐部以前的文章或继续浏览下面的相关文章,希望大家以后多多支持IT俱乐部!

本文收集自网络,不代表IT俱乐部立场,转载请注明出处。https://www.2it.club/navsub/css/15876.html
上一篇
下一篇
联系我们

联系我们

在线咨询: QQ交谈

邮箱: 1120393934@qq.com

工作时间:周一至周五,9:00-17:30,节假日休息

关注微信
微信扫一扫关注我们

微信扫一扫关注我们

返回顶部