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

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;

 }