返回顶部
分享到

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

css 来源:互联网 作者:佚名 发布时间:2025-06-21 22:05:54 人浏览
摘要

代码示例: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 .coupon_card.active { border: 1px solid #f32121; position: relative; } .coupon_card.active::after { content: ; position: absolute; right: 0; bottom: 0

代码示例:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

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

 }

效果图:


版权声明 : 本文内容来源于互联网或用户自行发布贡献,该文观点仅代表原作者本人。本站仅提供信息存储空间服务和不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权, 违法违规的内容, 请发送邮件至2530232025#qq.cn(#换@)举报,一经查实,本站将立刻删除。
原文链接 :
    Tag :
相关文章
  • 本站所有内容来源于互联网或用户自行发布,本站仅提供信息存储空间服务,不拥有版权,不承担法律责任。如有侵犯您的权益,请您联系站长处理!
  • Copyright © 2017-2022 F11.CN All Rights Reserved. F11站长开发者网 版权所有 | 苏ICP备2022031554号-1 | 51LA统计