CSS實現數字標籤樣式

大家在逛購物網站或者小說網站的時候都會發現，有商品或小說封面圖旁邊都有排名或者受歡迎等標誌，那麼我們今天就來講一下是如何?這些標誌的吧！

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陰影的詳解