先來乙個簡單的三角形案例：
width: 0px;
height: 0px;
border-top: 40px solid transparent;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-bottom: 40px solid red;
邊框排列方式我不明白為什麼畫出會是乙個三角形呢？在我的理解中，邊框應該是這樣的
一直以來也沒有深入研究過這個，所以這個錯誤一直跟到了現在。
實際上正確的邊框排列方式是這樣的：
看清楚了，邊框是呈梯形排列的，現在明白為什麼了吧！
但是畫三角形還有乙個重要因此，那就是高度和寬度必須為0。當width屬性有值時，無論邊框是的值有多寬，始終不會影響width屬性的值。so，如果畫乙個三角形，就必須把width和height屬性的值設為0。（標準盒模型原理）
transparent作用就是將顏色設定為透明的。
所以我們就能看到乙個三角形了。
CSS繪製三角形的原理剖析
今天學習bootstrap時候，看到按鈕的向下三角形原始碼 1 caret 我對border應用的原理不解，所以準備探索一下。我一直以邊框是矩形的，如下 border當我們增大border的值時 從上圖可以很明顯的發現每一邊的邊框是梯形。現在試想一下，我們把元素的長和寬都設定為0px,邊框的值不變，...
css 修改三角形大小 CSS繪製三角形原理及應用
在從 psd 到 html 頁面的過程中，免不了要遇到乙個問題 這個小圖示，可以用 css 效果實現，也可以切圖下來，到底該怎麼選擇呢？在此我個人的選擇一般都是，用 css 實現，當然切圖然後實現也是聰明人的辦法，但是我覺得學好乙個技術最關鍵的不是學習，而是使用。學了不用都是假把式。學了 css 有...
CSS繪製三角形原理
由按鈕的向下三角形原始碼 css view plain copy caret 對border應用的原理不解，所以準備探索一下。我一直以邊框是矩形的，如下 css view plain copy border 當我們增大border的值時 從上圖可以很明顯的發現每一邊的邊框是梯形。現在試想一下，我們把...