《如何用純css實現的箭頭的效果？》要點：
用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即可繪製出各種箭頭，無需裁剪，甚至沒有用到css3的東西。對瀏覽器支援良好。基本原理 原理非常簡單，通過擷取border 邊框 的部分 拐角 實現，幾行css 即可理解 乙個梯形 當元素寬 高和邊框的寬相近 等 時，改變某一邊的顏色可以看到乙個梯形 demo11 border 10px so...
css畫橫線箭頭 CSS繪製箭頭
實際需求中，很多時候都會有箭頭的情況，只不過一開始總是喜歡找別人寫好的，隨著需求的增加，很難通過修改來滿足需求，所以理解原理自己動手才是萬難的根本解決辦法。一 繪製三角 容器 樣式 container width 0 height 0 border 50px solid border color r...
css畫橫線箭頭 CSS 如何畫三角形和箭頭
使用 border 畫三角形和箭頭 一條邊框在和模型中其實並不是一條線，如果我們將邊框設定得足夠大，並且設定不同的顏色，我們就很容易看到邊框的本質，從下圖很容易可以看出其事 border 在乙個正方形 dom 上其實是乙個梯形 css border.png 畫三角形 利用這一原理我們可以將 dom ...