用css即可繪製出各種箭頭，無需裁剪，甚至沒有用到css3的東西。對瀏覽器支援良好。
基本原理
原理非常簡單，通過擷取border(邊框)的部分「拐角」實現，幾行css**即可理解：
乙個梯形
當元素寬、高和邊框的寬相近(等)時，改變某一邊的顏色可以看到乙個梯形；
#demo11 {
border: 10px solid #000;
border-left-color: #f00;
width: 10px;
height: 10px;
乙個三角形
當元素寬、高為零，且其他邊為透明顏色時，可以形乙個三角形。
#demo12 {
border: 10px solid #000;
border-left-color: #f00;
width: 0;
height: 0;
任意角度的三角形
改變各個邊的寬度，即通過調整「邊框」厚度可以配置出任意角度
#demo14 {
border: 10px solid transparent;
border-left: 20px solid #f00;
width: 0;
height: 0px;
通過偽元素實現
三角形可以通過偽元素繪製出，而無需改變原來的dom結構
文字內容
文字內容
#demo15{
position: relative;
#demo15:after {
border: 10px solid transparent;
border-left: 10px solid #f00;
width: 0;
height: 0;
position: absolute;
content: ' '
偽元素實現三角線箭頭
通過偽元素繪製出的兩個，乙個與背景色相同覆蓋部分紅色箭頭，形成三角線
文字內容
文字內容
#demo16{
position: relative;
#demo16:after, #demo16:before {
border: 10px solid transparent;
border-left: 10px solid #fff;
width: 0;
height: 0;
position: absolute;
top: 0;
right: -20px;
content: ' '
#demo16:before {
border-left-color: #f00;
right: -21px;
三角線分割的tab頁
文字內容 tab1
文字內容 tab2
文字內容 tab3
#demo17{
font-size: 10px;
height: 24px;
#demo17 li {
float: left;
position: relative;
list-style: none;
margin: 0 20px 12px -19px;
border-top: solid 1px #ddd;
border-bottom: solid 1px #ddd;
padding-left: 12px;
#demo17 li:after, #demo17 li:before {
border: 10px solid transparent;
border-left: 10px solid #fff;
width: 0;
height: 0;
position: absolute;
top: 0;
right: -18px;
content: ' '
#demo17 li:before {
border-left-color: #ddd;
right: -19px;
三角形跟矩形組合成提示框
#demo {
width: 100px;
height: 100px;
background-color: #ccc;
position: relative;
border: 4px solid #333;
#demo:after, #demo:before {
border: solid transparent;
content: ' ';
height: 0;
left: 100%;
position: absolute;
width: 0;
#demo:after {
border-width: 9px;
border-left-color: #ccc;
top: 15px;
#demo:before {
border-width: 14px;
border-left-color: #333;
top: 10px;
css畫橫線箭頭 如何用純CSS實現的箭頭的效果？
如何用純css實現的箭頭的效果？要點 用css即可繪製出各種箭頭，無需裁剪，甚至沒有用到css3的東西。對瀏覽器支援良好。基本原理 原理非常簡單，通過擷取border 邊框 的部分 拐角 實現，幾行css 即可理解 乙個梯形 當元素寬 高和邊框的寬相近 等 時，改變某一邊的顏色可以看到乙個梯形 de...
css畫橫線箭頭 CSS繪製箭頭
實際需求中，很多時候都會有箭頭的情況，只不過一開始總是喜歡找別人寫好的，隨著需求的增加，很難通過修改來滿足需求，所以理解原理自己動手才是萬難的根本解決辦法。一 繪製三角 容器 樣式 container width 0 height 0 border 50px solid border color r...
css畫橫線箭頭 用CSS繪製三角形箭頭
用css繪製三角形箭頭。使用純css，你只需要很少的 就可以創作出各種瀏覽器都相容的三角形箭頭！css create an arrow that points up div.arrow up width 0 height 0 border left 5px solid transparent lef...