問題描述

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

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

但是對(duì)于圖中

以下代碼：.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。

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

問題解答

生成的機(jī)制我不清楚，我說說我的見解，如果有錯(cuò)請(qǐng)各位大牛指出！

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

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

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

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

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

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

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

菜鳥獻(xiàn)丑了。。。表達(dá)不清楚或有錯(cuò)的請(qǐng)見諒。。。。。。