先看一段**：
#div1根據**渲染，顯示效果如下（邊框顏色border-color四個值預設的載入方向，top right bottom left）：
根據css**，邊框的寬度都是100px，div高度和寬度也是100px，但是這個和三角形有什麼關聯嗎？
不急再看乙個圖，我們把div寬度和高度設定為0。
css**：
#div1瀏覽器就渲染出如下：
咦，每個邊都是三角形？ （可以試試只把div高寬其中乙個設定為0，另乙個100px）
既然有三角形了，下面就好辦了。比如我要藍色的三角形，把其它三個邊顏色都去掉不就可以了嘛：
藍色三角形不就得到了。
審查元素一看，問題就出來了：
雖然其它三個邊都隱藏了，位置還在，怎麼把多餘的位置去掉呢？
試著修改下邊框的寬度（寬度值對應：top right bottom left）：
先把boder-width第乙個值改為50px試試：
#div1修改前：
修改後：
發現上面多餘的地方少了一半，設定border-width第乙個值為0px試試：
檢視元素已經完全是三角形的高度了
至此三角形就完成了。
那想其它三角形，應該怎麼辦？
再看下上面的圖：
就以藍色的三角形為例，它的高度，就是css中設定的100px。那它的底邊的長度和其它兩個邊的長度怎麼來的呢？
哈哈，問的跟個小學生題一樣。
藍色三角形（bottom）其實從它的頂點垂直下來一條線為準，將藍色三角形分為左右兩個小三角形，左邊小三角形底邊受left值影響，右邊小三角形底邊受right值影響。
其它一樣：
top最長邊=left值+right值=200px
left最長邊=top值+bottom值=200px
明白以上關係，就能隨便繪製什麼三角形了，如將藍色三角形渲染為直角三角形（還是以上面**為例）：
css如何將div畫成三角形
首先了解一下盒模型 盒模型先看一段 div1 根據 渲染，顯示效果如下 邊框顏色border color四個值預設的載入方向，top right bottom left 根據css 邊框的寬度都是100px，div高度和寬度也是100px，但是這個和三角形有什麼關聯嗎？不急再看乙個圖，我們把div寬...
css繪製向左三角形 CSS繪製三角形
1.繪製乙個外邊框 div 2.重定義外邊框樣式 當外邊框有了寬度，不知大家是否想乙個問題，相鄰的線條邊界在哪，下面通過把外邊框相鄰側邊設定不同顏色來觀察 使用下面的語句替換上面的border定義 border bottom 50px solid 555555 border top 50px sol...
css 修改三角形大小 css實現三角形
最近的乙個專案頁面中，有很多三角形icon，在不考慮ie相容性下，使用了css實現三角形，記錄一下 1 實心三角形，利用transparent實現 1 設定線條寬50px，div 寬高0 width 0px height 0px border right 100px solid red border...