今天有個同學詢問了我關於使用css製作三角形的問題，我也沒有怎麼想考慮，直接給了原始碼。然後她詢問了一系列的問題，我才意識到，這類**網上一般都有，缺的是製作的原理，於是就有了編寫部落格的想法。
下面我們先來看一下效果：
接下來我們看一下源**：
首先我們知道css是採用盒子模型：所謂盒子模型，就是元素的內容（content）外層包裹補丁（padding），邊框（border），再加上一層邊距（margin）。你可以想象成有乙個紙盒子，裡面存放的東西就是元素的內容（content），而盒子的紙板就是邊框（border），補丁（padding）就是紙板和東西之間的空隙，如果有多個盒子，那麼盒子與盒子之間的空隙就是margin。當然，css的盒子模型並不是那麼簡單，有興趣的讀者可以查詢的其他資料。
話歸正題，我們來解釋三角形的繪製原理：
當乙個div的外層包裹了一層border，我們不妨將它的border寬度設定為乙個極大的數，如110px（雖然我們平時並不經常這樣做），並且把它上下左右邊框設定為不同的顏色，另外我們將div的寬高設定成乙個較小的數，如50px,見下面**：
div同時，我們發現，border-right的繪製範圍，圖中梯形abcd的部分。其中ab是border最外圍的頂點，cd是content以及padding（圖中padding為0）組成的矩形的頂點。事實上，border也是這樣繪製的。
我們可以想象，隨著div的高度不斷減小，cd的長度也將不斷減少，當div的高度變為0時，這時，cd也成了乙個點，這時border-right成了乙個三角形，如下圖所示：
如果，div此時的width也變為0px，我們可以想象，這個div將會變成乙個由4個三角形組成的矩形。這個時候，如果我們把border-top以及border-bottom，border-letf顏色設定為透明，將會看到什麼？不錯，乙個向左朝向的三角形，至此，我們繪製三角形的原理講完。
下面是利用border的每一邊繪製繪製範圍的原理，繪製一些其他的圖形。
.arc
.trapezoid
.circle
.ellipse
.label
最後，由於這是本人第一次寫部落格，經驗有限，而且本人網頁知識有限，理解不深，如果有錯誤，請不吝賜教。謝謝
css繪製向左三角形 CSS繪製三角形
1.繪製乙個外邊框 div 2.重定義外邊框樣式 當外邊框有了寬度，不知大家是否想乙個問題，相鄰的線條邊界在哪，下面通過把外邊框相鄰側邊設定不同顏色來觀察 使用下面的語句替換上面的border定義 border bottom 50px solid 555555 border top 50px sol...
CSS繪製三角形
利用css繪製三角形 並應用在相應的場景中，減少的使用，可提高載入速率，降低http請求次數 在同一方向上，大致有三種繪製方式，繪製出來的有兩種規格 在保持寬度不變的情況下 對比圖 假定給第乙個三角形命名為 1，則第二第三個分別為 2，3 先從第三個最小面積的說起，如下 height 0 width...
css繪製三角形
今天，偶遇乙個css繪製三角形的 用處很大哦，分享給大家，送上 1 doctype html 2 html lang en 3 head 4 meta charset utf 8 5 title title title 6 style type text css 7.parent 13.square...