请求解析CSS绘制三角形代码：为何呈现三角形而非预期边框

先看你提供的代码：

.triangle {
  width: 0;
  height: 0;
  border-top: 100vh solid yellow;
  border-right: 100vw solid rgb(13, 13, 54);
}

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

为什么会画出三角形，而非预期的顶部黄边、右侧蓝边？ #

核心原因是当元素的width和height都设为0时，CSS边框的渲染逻辑完全变了：

平时元素有宽高时，边框是围绕内容区域的矩形线条——比如给一个宽100px、高100px的盒子加边框，边框就是包裹这个盒子的四条边。但当元素宽高为0时，内容区域消失，四个边框会变成以元素原点（默认左上角）为交汇点的三角形填充块：每个边框的“宽度”（比如border-top的数值）其实是它向相反方向延伸的长度，最终呈现为三角形形状。

放到你的代码里具体说：

• 你只设置了border-top和border-right，另外两个方向的边框（border-bottom、border-left）默认宽度为0，不会显示。
• border-top: 100vh solid yellow：这个边框会从元素左上角向下延伸100vh（整个视口高度），形成一个直角三角形区域；border-right: 100vw solid rgb(13,13,54)则从元素左上角向右延伸100vw（整个视口宽度），形成另一个直角三角形区域。
• 这两个三角形以左上角为公共顶点，拼接在一起就成了覆盖整个视口的大直角三角形，而不是你以为的独立侧边线条。

简单说：元素没宽高时，边框不再是“线”，而是“填充的三角形块”，相邻的两个边框自然会拼成更大的三角形。

内容的提问来源于stack exchange，提问作者aks