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

#

以上是CSS實作數位標籤樣式的詳細內容。更多資訊請關注PHP中文網其他相關文章！