問題描述

以前我知道一種方法:它的機制是：比如div，我設置它的寬高為100px,然后設置border:50px solid transparent;即設置4個向內延伸的透明邊框；

再根據需要三角形的朝向比如朝下就設置border-top:red;將需要的邊框上色，這樣就得到紅色的三角形。

但是對于圖中

以下代碼：.m-UIFAB-phone .triangle-1 {

border-right: 200px solid transparent;border-top: 200px solid #aaa;height: 0;left: 0;position: absolute;top: 0;width: 0;

}

是生成左上角灰色等邊三角形的css。

但是我不理解它生成的機制。設置在寬高為0情況下，設置border-top和border-right是如何起作用的。對于box-sizing為border-box和content-box這樣的css相同嗎？最好可以畫圖表示一下三角形的形成過程，解釋下 border-right: 200px solid transparent;和 border-top: 200px solid #aaa;各自的作用謝謝。

問題解答

生成的機制我不清楚，我說說我的見解，如果有錯請各位大牛指出！

1、設置在寬高為0情況下，設置border-top和border-right是如何起作用的？答：設置的寬高只是內容顯示區域的寬高，border是邊界，所以寬高=0，border還是存在的。

2、對于box-sizing為border-box和content-box這樣的css相同嗎？答：貼上w3school的說明，如下content-box 這是由 CSS2.1 規定的寬度高度行為。寬度和高度分別應用到元素的內容框。在寬度和高度之外繪制元素的內邊距和邊框。

border-box 為元素設定的寬度和高度決定了元素的邊框盒。就是說，為元素指定的任何內邊距和邊框都將在已設定的寬度和高度內進行繪制。通過從已設定的寬度和高度分別減去邊框和內邊距才能得到內容的寬度和高度。

inherit 規定應從父元素繼承 box-sizing 屬性的值。

3、三角形形成不知道怎么說，畫了一張圖。。。應該有用吧。。。見諒

4、解釋下 border-right: 200px solid transparent;和 border-top: 200px solid #aaa;

border-right：大小 樣式（solid 實線） 顏色值（transparent 透明）

菜鳥獻丑了。。。表達不清楚或有錯的請見諒。。。。。。