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

冰雪之语

代码示例：

1. .coupon_card.active {
2. border: 1px solid #f32121;
3. position: relative;
4. }
5. .coupon_card.active::after {
6. content: '';
8. position: absolute;
9. right: 0;
10. bottom: 0;
11. border-width: 0 0 20px 20px;
12. border-style: solid;
13. border-color: transparent transparent #f32121;
15. }
16. .coupon_card.active::before {
17. content: '';
18. position: absolute;
19. width: 10px;
20. height: 6px;
21. background: transparent;
22. bottom: 4px;
23. right: 2px;
24. border: 2px solid white;
25. border-top: none;
26. border-right: none;
27. -webkit-transform: rotate(-55deg);
28. -ms-transform: rotate(-55deg);
29. transform: rotate(-55deg);
30. z-index: 9;
31. }

复制代码

效果图：

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

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！