由按鈕的向下三角形原始碼：
[css]view plain
copy
.caret
對border應用的原理不解，所以準備探索一下。我一直以邊框是矩形的，如下**
[css]view plain
copy
.border
當我們增大border的值時
從上圖可以很明顯的發現每一邊的邊框是梯形。
現在試想一下，我們把元素的長和寬都設定為0px,邊框的值不變，我們用極限的原理解釋，每一邊的邊框將會由梯形變成三角形，下面我們用**來試驗一下。
[css]view plain
copy
.border
果然不出所料，我們得到如下結果：
那麼現在我們對如何繪製三角形就有乙個思路：把其他三邊的邊框的border-color值設為transparent，即可得到乙個三角形。比如
[css]view plain
copy
.border
我們再回過頭來看bootstrap中.caret的原始碼。似乎和我們想象中的不一樣，在設計向下三角形時，開發者只設定了左上右的邊框值，然後將左右兩邊的邊框的border-color設定為transparent。我們現在先把左右兩邊的border-color不設定為transparent，看看是怎麼樣的圖形。
[css]view plain
copy
.border
原來當不設定下邊框時，左右的邊框會把下半部分切掉。到這裡我們應該能完全理解bootstrap的.caret**的原理了。
但是我們的探索並沒有到此就結束，我們帶著好奇心，測試如下**：
[css]view plain
copy
.border
我們只設定上右的邊框，得到如下結果：
似乎有點難以理解，如果我們測試如下**，應該會恍然大悟。
[css]view plain
copy
.border
原來上面那乙個例子顯示成乙個正方形，是因為元素的高和寬都為0，從而導致border收縮為右上角那一部分。
最有我們來看看，如果只設定元素對邊的兩條邊框，看看會出現什麼情況。
[css]view plain
copy
.border
瀏覽器什麼也不顯示，分析其原因：因為元素的高和寬都為0，而且對邊的兩條邊框沒有交集，所以必然收縮為0.
最後我們來看乙個應用的例子：
[css]view plain
copy
"white-space:pre"
>
#demo
#demo
:after,
#demo
:before
#demo
:after
#demo
:before
css繪製向左三角形 CSS繪製三角形
1.繪製乙個外邊框 div 2.重定義外邊框樣式 當外邊框有了寬度，不知大家是否想乙個問題，相鄰的線條邊界在哪，下面通過把外邊框相鄰側邊設定不同顏色來觀察 使用下面的語句替換上面的border定義 border bottom 50px solid 555555 border top 50px sol...
css 修改三角形大小 CSS繪製三角形原理及應用
在從 psd 到 html 頁面的過程中，免不了要遇到乙個問題 這個小圖示，可以用 css 效果實現，也可以切圖下來，到底該怎麼選擇呢？在此我個人的選擇一般都是，用 css 實現，當然切圖然後實現也是聰明人的辦法，但是我覺得學好乙個技術最關鍵的不是學習，而是使用。學了不用都是假把式。學了 css 有...
CSS繪製三角形
利用css繪製三角形 並應用在相應的場景中，減少的使用，可提高載入速率，降低http請求次數 在同一方向上，大致有三種繪製方式，繪製出來的有兩種規格 在保持寬度不變的情況下 對比圖 假定給第乙個三角形命名為 1，則第二第三個分別為 2，3 先從第三個最小面積的說起，如下 height 0 width...