1、向上的箭頭
.arrow
畫出正方形的任意相鄰的兩條邊線，然後旋轉一定的角度 得到需要的任意方向的箭頭。
deg 角度單位 rotate 旋轉角度
箭頭的大小由正方形的寬高去控制
箭頭的粗細由border-width去控制
箭頭的顏色由border-color去控制
2、直角三角形
.********
利用border的三個屬性：border-width/border-style/border-color去實現，
寬度和高度要為0，
實現乙個由四個小三角形組成的正方形 ；
要啥方向的三角形只需要保留這個方向的顏色色值，其它方向的顏色設為透明transparent即可。
三角形的大小由border-width控制
三角形的顏色由border-color控制
3、非直角三角形
.********2
Border屬性製作三角Tip
第一次寫部落格，今天剛做了乙個選單 發現border屬性的妙用，效果如圖 主要用到的幾個屬性 border color border width border style，border color 設定邊框顏色 一共四個值 分別對應 上 右 下 左 border width 設定邊框的寬度 例如bo...
CSS實現空心三角指示箭頭
web開發中，三角形的日常應用，以三角形指示箭頭最為常見，其用css來實現非常簡單，熟悉了之後相比於引入svg或是背景會是更好更靈活的選擇。而三角箭頭一般而言，又分為兩種，一種是視覺上沒有邊框的，我們叫做實心三角形 還有一種是視覺上有邊框的，而三角箭頭刨去邊框的部分又要與主體元素的背景顏色一致，我們...
CSS 利用border屬性畫三角形和梯形
首先，看一下border的延申效果 定義乙個正常顯示的div 效果如圖 可以發現，border的延申效果是成梯形的乙個線條。那麼，如果我們把中間div的大小設定為0，那麼中間的白色區域則為乙個點，即梯形中的一邊消失，即可實現繪製三角形的目的。三角形修改如下 效果如圖 通過修改各邊延申長度，可生產不規...