在從 psd 到 html 頁面的過程中，免不了要遇到乙個問題：「這個小圖示，可以用 css 效果實現，也可以切圖下來，到底該怎麼選擇呢？？？」
在此我個人的選擇一般都是，用 css 實現，當然切圖然後實現也是聰明人的辦法，但是我覺得學好乙個技術最關鍵的不是學習，而是使用。學了不用都是假把式。學了 css 有機會讓你炫技，不用是大傻。
最常見的一類小圖示就是三角形，今天我來總結一下用 css 實現三角形的原理。網上相關資料較多，講的也都很好，個人部落格主要還是用於記錄分享，毫無商業前景，不喜勿噴。
盒子模型包括了：margin-border-padding-content
其中，在上下左右的邊框交界處，都形成了斜線，利用這一特性，我們可以通過設定不同的上下左右邊框的寬度和顏色，可以得到小三角、小梯形等；調整寬度大小可以調節三角形的形狀。
我們首先嘗試上下左右顏色區分，並將 border 的寬度給大一點，看看效果。
接下來我們把 content 寬度設定為 0
這時我們可以看到，已經出現了四個顏色不同的三角形了。
接下來我們把其中三種顏色設定為和背景顏色一樣，只保留一種顏色的對比，**如下：
在 ie6 下，不支援透明，需要將餘下三條邊的 border-style 設定為 dashed 即可。
**如下：
同理，我們消去相鄰的兩個三角形，會得到乙個以對角線為斜邊的大三角形。
這樣我們設定 border-width 為不同的值：
效果如下：
就是說我們只要設定不同的寬度值，可以得到任意形狀的三角形，完美。
注意：用來繪製三角形的必須是 block 元素。
css 三角形的實現原理及運用
css3 實現三角形、扇形和特殊的形狀等
————————————————
css繪製三角形原理及應用_aelous_dp的部落格-csdn部落格blog.csdn.net
css 修改三角形大小 css實現三角形
最近的乙個專案頁面中，有很多三角形icon，在不考慮ie相容性下，使用了css實現三角形，記錄一下 1 實心三角形，利用transparent實現 1 設定線條寬50px，div 寬高0 width 0px height 0px border right 100px solid red border...
css繪製向左三角形 CSS繪製三角形
1.繪製乙個外邊框 div 2.重定義外邊框樣式 當外邊框有了寬度，不知大家是否想乙個問題，相鄰的線條邊界在哪，下面通過把外邊框相鄰側邊設定不同顏色來觀察 使用下面的語句替換上面的border定義 border bottom 50px solid 555555 border top 50px sol...
CSS繪製三角形
利用css繪製三角形 並應用在相應的場景中，減少的使用，可提高載入速率，降低http請求次數 在同一方向上，大致有三種繪製方式，繪製出來的有兩種規格 在保持寬度不變的情況下 對比圖 假定給第乙個三角形命名為 1，則第二第三個分別為 2，3 先從第三個最小面積的說起，如下 height 0 width...