很久之前收集的，忘記出處了。
1.梯形： 當元素寬、高和邊框的寬相近（等）時，改變某一邊的顏色可以看到乙個梯形；
border: 10px solid #000;
border-left-color: #f00;
width: 10px;
height: 10px;
2.三角形：當元素寬、高為零，且其他邊為透明顏色時，可以形乙個三角形。
border: 10px solid #000;
border-left-color: #f00;
width: 0;
height: 0;
3.任意角度的三角形
border: 10px solid transparent;
border-left: 20px solid #f00;
width: 0;
height: 0px;
4.通過偽元素實現
文字內容
#demo15
#demo15:after
5.偽元素實現三角線箭頭 >：通過偽元素繪製出的兩個，乙個與背景色相同覆蓋部分紅色箭頭， 形成三角線。
#demo16
#demo16:after, #demo16:before
#demo16:before
6.三角形和矩形組合成提示框
#demo
#demo:after, #demo:before
#demo:after
#demo:before
css畫橫線箭頭 用純CSS實現的箭頭
用css即可繪製出各種箭頭，無需裁剪，甚至沒有用到css3的東西。對瀏覽器支援良好。基本原理 原理非常簡單，通過擷取border 邊框 的部分 拐角 實現，幾行css 即可理解 乙個梯形 當元素寬 高和邊框的寬相近 等 時，改變某一邊的顏色可以看到乙個梯形 demo11 border 10px so...
純CSS繪製箭頭
這幾天研究別人的 發現別人的箭頭居然是用純css寫的。瞬間覺得高大上。細細研究其中的原理，發現其實也很簡單。繪製箭頭，首先應該懂得如何用純css繪製三角形。我們先做乙個寬高為0，有邊框的div看一看效果。width 0 height 0 border 50px solid border color ...
css畫橫線箭頭 如何用純CSS實現的箭頭的效果？
如何用純css實現的箭頭的效果？要點 用css即可繪製出各種箭頭，無需裁剪，甚至沒有用到css3的東西。對瀏覽器支援良好。基本原理 原理非常簡單，通過擷取border 邊框 的部分 拐角 實現，幾行css 即可理解 乙個梯形 當元素寬 高和邊框的寬相近 等 時，改變某一邊的顏色可以看到乙個梯形 de...