很久之前收集的,忘記出處了。
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...