純css實現各種方向小箭頭

2021-07-27 03:22:06 字數 783 閱讀 3463

在開發頁面的時候，遇到很多的列表都需要用到箭頭，可以直接用作背景鋪墊，純css也能實現，並且沒有相容性顧慮，不用css3,相比而言，比更好用。

原理：乙個高寬相等的正方形，選取你所需要的某一邊，擷取之，就是乙個梯形，當高寬都為0，且其他邊為透明顏色時，乙個三角形就出來了

梯形**： 

html


:"arrow">


css:


arrow
把高寬設為0，其他邊為透明顏色，三角形出來了： 

html


:"arrow">


css:


arrow
在開發中，可以利用偽類，定位實現，不改變dom結構，簡潔優雅。content提供給三角形的位置，這個屬性不能少。 

html


:"arrow">文字文字


css:


div
現在追求平面化設計，還有另一種三角線箭頭，更受歡迎。

設定兩個偽類，前乙個偽類覆蓋至另乙個了偽類，留出一些線出來就好： 

html


:"arrow">文字文字


css:


div 


.arrow


:after,.arrow


:before 


.arrow


:before
may you like it.

純css實現箭頭

很久之前收集的，忘記出處了。1.梯形 當元素寬 高和邊框的寬相近 等 時，改變某一邊的顏色可以看到乙個梯形 border 10px solid 000 border left color f00 width 10px height 10px 2.三角形 當元素寬 高為零，且其他邊為透明顏色時，可以形...

css畫橫線箭頭 用純CSS實現的箭頭

用css即可繪製出各種箭頭，無需裁剪，甚至沒有用到css3的東西。對瀏覽器支援良好。基本原理 原理非常簡單，通過擷取border 邊框 的部分 拐角 實現，幾行css 即可理解 乙個梯形 當元素寬 高和邊框的寬相近 等 時，改變某一邊的顏色可以看到乙個梯形 demo11 border 10px so...

純CSS繪製箭頭

這幾天研究別人的 發現別人的箭頭居然是用純css寫的。瞬間覺得高大上。細細研究其中的原理，發現其實也很簡單。繪製箭頭，首先應該懂得如何用純css繪製三角形。我們先做乙個寬高為0，有邊框的div看一看效果。width 0 height 0 border 50px solid border color ...