CSS繪制三角形的原理剖析
今天學習Bootstrap時候,看到按鈕的向下三角形源碼:
1 .caret { 2 display: inline-block; 3 width: 0; 4 height: 0; 5 margin-left: 2px; 6 vertical-align: middle; 7 border-top: 4px solid; 8 border-right: 4px solid transparent; 9 border-left: 4px solid transparent; 10 }
我對border應用的原理不解,所以準備探索一下。我一直以邊框是矩形的,如下代碼
.border { width:50px; height:50px; border: 2px solid; border-color: #ADFF2F #BA55D3 #F4A460 #FF0000; }
當我們增大border的值時
.border { width:50px; height:50px; border: 20px solid; border-color: #ADFF2F #BA55D3 #F4A460 #FF0000; }
從上圖可以很明顯的發現每一邊的邊框是梯形。
現在試想一下,我們把元素的長和寬都設置為0px,邊框的值不變,我們用極限的原理解釋,每一邊的邊框將會由梯形變成三角形,下面我們用代碼來試驗一下。
.border { width:0px; height:0px; border: 20px solid; border-color: #ADFF2F #BA55D3 #F4A460 #FF0000; }
果然不出所料,我們得到如下結果:
那麽現在我們對如何繪制三角形就有一個思路:把其他三邊的邊框的border-color值設為transparent,即可得到一個三角形。比如
.border { width:0px; height:0px; border: 20px solid; border-color: #ADFF2F transparent transparent transparent; }
我們再回過頭來看Bootstrap中.caret的源碼。似乎和我們想象中的不一樣,在設計向下三角形時,開發者只設置了左上右的邊框值,然後將左右兩邊的邊框的border-color設置為transparent。我們現在先把左右兩邊的border-color不設置為transparent,看看是怎麽樣的圖形。
1 .border { 2 width: 0; 3 height:0; 4 border-top: 40px solid #ADFF2F; 5 border-right: 40px solid #BA55D3; 6 border-left: 40px solid #FF0000; 7 }
原來當不設置下邊框時,左右的邊框會把下半部分切掉。到這裏我們應該能完全理解bootstrap的.caret代碼的原理了。
但是我們的探索並沒有到此就結束,我們帶著好奇心,測試如下代碼:
1 .border { 2 width: 0; 3 height:0; 4 border-top: 40px solid #ADFF2F; 5 border-right: 40px solid #BA55D3; 6 }
我們只設置上右的邊框,得到如下結果:
似乎有點難以理解,如果我們測試如下代碼,應該會恍然大悟。
1 .border { 2 width: 40px; 3 height:40px; 4 border-top: 40px solid #ADFF2F; 5 border-right: 40px solid #BA55D3; 6 }
原來上面那一個例子顯示成一個正方形,是因為元素的高和寬都為0,從而導致border收縮為右上角那一部分。
最有我們來看看,如果只設置元素對邊的兩條邊框,看看會出現什麽情況。
1 .border { 2 width: 0; 3 height:0; 4 border-top: 40px solid #ADFF2F; 5 border-bottom: 40px solid #FF0000; 6 }
瀏覽器什麽也不顯示,分析其原因:因為元素的高和寬都為0,而且對邊的兩條邊框沒有交集,所以必然收縮為0.
最後我們來看一個應用的例子:
1 <span style="white-space:pre"> </span>#demo { 2 width: 200px; 3 line-height: 100px; 4 background-color: #fff; 5 position: relative; 6 border: 1px solid #5BBF5A; 7 text-align: center; 8 font-size: 25px; 9 } 10 11 #demo:after, #demo:before { 12 border: solid transparent; 13 content: ‘ ‘; 14 width: 0; 15 height: 0; 16 position: absolute; 17 } 18 19 #demo:after { 20 border-width: 10px; 21 border-top-color: #fff; 22 top: 100px; 23 left: 150px; 24 } 25 26 #demo:before { 27 border-width: 11px; 28 border-top-color: #5BBF5A; 29 top: 100px; 30 left: 149px; 31 } 32
效果如下:
它實現的原理很簡單,就是兩個三角形的疊加。
CSS繪制三角形的原理剖析