CSS實現排行榜標籤樣式

2021-08-11 15:36:25 字數 769 閱讀 9199

即: 主要分以下幾步介紹我的實現過程:

當看到這個樣式的時候首先想到的是使用css應當可以實現。實現方式就是乙個定width和height的紅色div,再加上下方的乙個白色三角形覆蓋紅色div的下部分即可實現。但在最後看效果的時候卻是這樣的。

發現在這裡出現的問題是三角形會遮蓋到後面的,看起來很奇怪。那麼首先想到的解決方法是調整z-index大小來改變層次,首先紅色div的z-index肯定大於的z-index,那麼如果三角形能露出則必定無法遮蓋紅色div。故這樣不行。

既然上述方法不行,那麼可以發現如果我們畫的不是底下的白色三角形,而是畫兩邊的紅色小三角,在減少紅色div的height,再拼接一下,那麼就能夠完成上述樣式,並能夠露出。在css**方面只需要作出如下改變

.trangle

改為:

可以看到,這樣便能達到效果。因此在使用css寫這樣的圖形時,方法大多數不止一種,還是應多加思考實現方法。

用google f12原網頁,才發現,原網頁的排行榜標籤是個啊……

mysql製作排行榜 mysql實現排行榜

博主新人一枚,大家可以提出自己的寶貴意見。下來我們進入正題。大家首先要了解介面的場景,再就是排行榜的規則,我們這裡說的中國式排行榜。排行榜總結了一下分為3種 中國式排行 非中國式排行1 非中國式排行2 1 1 1 2 2 2 2 2 3 3 4 4 3 5 5 4 5 6 5 7 7 select ...

redis實現排行榜

排行榜功能是乙個很普遍的需求。設想在乙個遊戲中,有上百萬的玩家資料,如果現在需要你根據玩家的經驗值整理乙個前20名的排行榜,你會怎麼做呢?你不可能 order by limit 去實現 select from game socre order by score desc limit 0,20 使用 ...

Redis 實現排行榜

不再介紹資料庫做實時排行榜的弊端,直接介紹redis的有序集合的強大作用。有序集合的資料和集合一樣,不能重複,但每個元素又可以關聯乙個分數,這個分數可以重複。需要注意的是,redis版本和命令變化較大,注意執行環境。執行環境 redis 庫版本 3.3.11 redis版本 3.2.1 生成資料 i...