大家在逛购物网站或者小说网站的时候都会发现，有商品或小说封面图旁边都有排名或者受欢迎等标志，那么我们今天就来讲一下是如何实现这些标志的吧！
CSS实现排行榜标签样式
即：
主要分以下几步介绍我的实现过程：
初始实现方法（不成功）
后续实现方法（成功）
立即学习“前端免费学习笔记（深入）”；
原网页实现方法
1.初始实现方法
当看到这个样式的时候首先想到的是使用CSS应当可以实现。实现方式就是一个定width和height的红色p，再加上下方的一个白色三角形覆盖红色p的下部分即可实现。但在最后看效果的时候却是这样的。
发现在这里出现的问题是三角形会遮盖到后面的图片，看起来很奇怪。那么首先想到的解决方法是调整z-index大小来改变层次，首先红色p的z-index肯定大于图片的z-index，那么如果三角形能露出图片则必定无法遮盖红色p。故这样不行。
2.改变画法
既然上述方法不行，那么可以发现如果我们画的不是底下的白色三角形，而是画两边的红色小三角，在减少红色p的height，再拼接一下，那么就能够完成上述样式，并能够露出图片。在CSS代码方面只需要作出如下改变
.trangle {border-left: 15px solid transparent;border-right: 15px solid transparent;border-bottom: 10px solid #fff;}
改为：
.trangle {border-left: 15px solid transparent;border-right: 15px solid transparent;border-bottom: 10px solid #fff;}
可以看到，这样便能达到效果。因此在使用CSS写这样的图形时，方法大多数不止一种，还是应多加思考实现方法。
3.原网页实现
用Google F12原网页，才发现，原网页的排行榜标签是个图片啊……
相关推荐：
css3实现条状百分比效果
css3阴影的详解
以上就是CSS实现数字标签样式 的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1609094.html
微信扫一扫 
支付宝扫一扫 
