html - 关于直接用css生成三角形的问题

Question

以前我知道一种方法:它的机制是：
比如p，我设置它的宽高为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;各自的作用谢谢。

Answer 1

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

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 透明）

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

Answer 2

直接p旋轉45°，

.text {
    width: 100px;
    height: 100px;
    position: absolute;
    left: 0;
    top: 0px;
    margin-left: -50px;
    margin-top: -50px;
    background: red;
    transform: rotate(45deg);
}

<p class="text"></p>

不就可以了？

Answer 3

http://www.zhangweiwei.cn/demo/tools/border/ 希望對你有幫助