問題描述

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

再根據(jù)需要三角形的朝向比如朝下就設置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是如何起作用的？答：設置的寬高只是內(nèi)容顯示區(qū)域的寬高，border是邊界，所以寬高=0，border還是存在的。

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

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

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

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

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

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

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