CSS繪製三角形的原理剖析

2022-07-23 21:57:29 字數 1477 閱讀 9583

今天學習bootstrap時候，看到按鈕的向下三角形原始碼：

1


.caret
我對border應用的原理不解，所以準備探索一下。我一直以邊框是矩形的，如下**

.border
當我們增大border的值時

從上圖可以很明顯的發現每一邊的邊框是梯形。

現在試想一下，我們把元素的長和寬都設定為0px,邊框的值不變，我們用極限的原理解釋，每一邊的邊框將會由梯形變成三角形，下面我們用**來試驗一下。

.border
果然不出所料，我們得到如下結果：

那麼現在我們對如何繪製三角形就有乙個思路：把其他三邊的邊框的border-color值設為transparent，即可得到乙個三角形。比如

.border
我們再回過頭來看bootstrap中.caret的原始碼。似乎和我們想象中的不一樣，在設計向下三角形時，開發者只設定了左上右的邊框值，然後將左右兩邊的邊框的border-color設定為transparent。我們現在先把左右兩邊的border-color不設定為transparent，看看是怎麼樣的圖形。

1


.border
原來當不設定下邊框時，左右的邊框會把下半部分切掉。到這裡我們應該能完全理解bootstrap的.caret**的原理了。

但是我們的探索並沒有到此就結束，我們帶著好奇心，測試如下**：

1


.border
我們只設定上右的邊框，得到如下結果：

似乎有點難以理解，如果我們測試如下**，應該會恍然大悟。

1


.border
原來上面那乙個例子顯示成乙個正方形，是因為元素的高和寬都為0，從而導致border收縮為右上角那一部分。

最有我們來看看，如果只設定元素對邊的兩條邊框，看看會出現什麼情況。

1


.border
瀏覽器什麼也不顯示，分析其原因：因為元素的高和寬都為0，而且對邊的兩條邊框沒有交集，所以必然收縮為0.

最後我們來看乙個應用的例子：

1


#demo 


1011


#demo:after, #demo:before 


1819


#demo:after 


2526


#demo:before 


32
效果如下：

它實現的原理很簡單，就是兩個三角形的疊加。

CSS繪製三角形原理

由按鈕的向下三角形原始碼 css view plain copy caret 對border應用的原理不解，所以準備探索一下。我一直以邊框是矩形的，如下 css view plain copy border 當我們增大border的值時 從上圖可以很明顯的發現每一邊的邊框是梯形。現在試想一下，我們把...

剖析CSS三角形原理

先來乙個簡單的三角形案例 width 0px height 0px border top 40px solid transparent border left 40px solid transparent border right 40px solid transparent border bott...

css繪製向左三角形 CSS繪製三角形

1.繪製乙個外邊框 div 2.重定義外邊框樣式 當外邊框有了寬度，不知大家是否想乙個問題，相鄰的線條邊界在哪，下面通過把外邊框相鄰側邊設定不同顏色來觀察 使用下面的語句替換上面的border定義 border bottom 50px solid 555555 border top 50px sol...