it编程 > 网页制作 > Css

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

25人参与 2025-06-19 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角标效果内容请搜索代码网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持代码网!

(0)

您想发表意见!!点此发布评论

推荐阅读

CSS普通流、浮动与定位网页布局三大机制及最佳实践

06-19

CSS3打造的现代交互式登录界面详细实现过程

06-20

CSS place-items: center解析与用法详解

06-17

CSS中的Static、Relative、Absolute、Fixed、Sticky的应用与详细对比

06-17

CSS中前端单位 px、vw、vh 等的区别与使用建议

06-16

ubuntu终端打不开怎么办? 修复Ubuntu无法打开终端问题的方法

06-14

猜你喜欢

版权声明:本文内容由互联网用户贡献,该文观点仅代表作者本人。本站仅提供信息存储服务,不拥有所有权,不承担相关法律责任。 如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 2386932994@qq.com 举报,一经查实将立刻删除。

发表评论