css中为什么不设置宽高，可以用border生存正方形？

Question

代码

html

<div class="triangle"></div>

css

.triangle{
        width: 0;
        height: 0;
        border-left:50px solid red;
        border-bottom:50px solid blue;
        border-top:50px solid black;
        border-right:50px solid purple
    }

问题：
为什么会生成一个四色三角形组成的正方形？
为什么改变border-left会导致宽度改变？

看了各位的回答。
自问自答一下：
因为50px是 border对应边的宽度， width和height是div本身盒子的宽高，按照盒子模型从内到外（本身-padding-border-margin），当本身为0*0时，padding也为0-0-0-0，那么有宽度的border会自动往中间缩，
就导致了产生四色的三角形。

改变border-left，会导致左侧变宽，从而导致整个盒子模型的宽度变宽。（之前理解成左侧border的长度）

Answer 1

你可以打开控制台看一下，这个所谓的正方形是border，
border-left不会改变宽度，宽高还是0，这些东西控制台盒模型展示的很清楚

Answer 2

...这问题该去问制定标准的人吧

Answer 3

border不是定义了宽度为50px

Answer 4

CSS 边框

Answer 5

div.triangle的宽高是0，这个div就是中间的那个点。
它的四个border的宽度不为0,所以就会向外拉伸。
所以可以利用写出三角形。
我的例子https://impressioncr.github.i...

Answer 6

border-width:50px;你都自己写了，还问为啥有宽度