以前我知道一种方法:它的机制是：
比如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;各自的作用谢谢。
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
I don’t know the generation mechanism, so I will give you my opinion. If there are any mistakes, please point them out!
1. How does setting border-top and border-right work when the width and height are set to 0?
A: The set width and height are only the width and height of the content display area, and the border is the border, so the width and height = 0, and the border still exists.
2. Is the CSS of box-sizing border-box and content-box the same?
Answer: Paste w3school’s instructions as follows
content-box This is the width and height behavior specified by CSS2.1. The width and height are applied separately to the element's content box. Draws the element's padding and borders outside of its width and height.
border-box The width and height set for the element determine the border box of the element. That is, any padding and borders specified for the element will be drawn within the set width and height. The width and height of the content are obtained by subtracting the border and padding from the set width and height respectively.
inherit specifies that the value of the box-sizing attribute should be inherited from the parent element.
3. I don’t know how to explain the formation of triangles, so I drew a picture. . . It should be useful. . . Forgive me
4. Explain border-right: 200px solid transparent; and border-top: 200px solid #aaa;
border-right: size style (solid solid line) color value (transparent transparent)
The rookie is showing off. . . Please forgive me if the expression is unclear or wrong. . . . . .
Directly rotate 45°,
Isn’t that enough?
http://www.zhangweiwei.cn/demo/tools/border/ Hope it helps you