CSS实现排行榜标签样式

红太狼 2022-06-04 02:40 389阅读 0赞

# CSS实现排行榜标签样式 #

![这里写图片描述][SouthEast]

即：  
　　  
![这里写图片描述][SouthEast 1]

主要分以下几步介绍我的实现过程：

*  **初始实现方法（不成功）**
 *  **后续实现方法（成功）**
 *  **原网页实现方法**

--------------------

## 1.初始实现方法 ##

当看到这个样式的时候首先想到的是使用CSS应当可以实现。实现方式就是一个定width和height的红色div，再加上下方的一个白色三角形覆盖红色div的下部分即可实现。但在最后看效果的时候却是这样的。  
　　  
　　![这里写图片描述][SouthEast 2]

发现在这里出现的问题是三角形会遮盖到后面的图片，看起来很奇怪。那么首先想到的解决方法是调整z-index大小来改变层次，首先红色div的z-index肯定大于图片的z-index，那么如果三角形能露出图片则必定无法遮盖红色div。故这样不行。

## 2.改变画法 ##

既然上述方法不行，那么可以发现如果我们画的不是底下的白色三角形，而是画两边的红色小三角，在减少红色div的height，再拼接一下，那么就能够完成上述样式，并能够露出图片。在CSS代码方面只需要作出如下改变

.trangle {
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 10px solid #fff;
    }

改为：

.trangle {
    border-left: 15px solid red;
    border-right: 15px solid red;
    border-bottom: 10px solid transparent;
    }

![这里写图片描述][SouthEast 3]  
　　可以看到，这样便能达到效果。因此在使用CSS写这样的图形时，方法大多数不止一种，还是应多加思考实现方法。

## 3.原网页实现 ##

用Google F12原网页，才发现，原网页的排行榜标签是个图片啊……

[SouthEast]: /images/20220604/5fd73714bba548fc8d1514b2c6d3c200.png
[SouthEast 1]: /images/20220604/ac018f4e71114691bd5cd5e6094633cd.png
[SouthEast 2]: /images/20220604/c64099ecb2854f8a9f3e3d1b245a2a34.png
[SouthEast 3]: /images/20220604/5ff6757567cc4b8280717dcb5f76f099.png