用CSS绘制三角形

我最近发现，可以使用纯css在宽度和高度为0的div上使用border属性创建三角形。虽然使用css实现这一点非常简单，但我很好奇，通过使左边框和右边框透明，如何使箭头向上

据我所知，当我们将边框底部设置为10px时，左右边框应该变成矩形，而不是边透明的三角形

---

请解释一下它是如何工作的。我肯定我错了，但对澄清很好奇。

相邻边界不能重叠。要绘制边框，浏览器将从边框的外角到内角绘制一条不可见的线。每个边框仅适用于此线的一侧

所以，如果你

div
{
    border: none;
    border-bottom: 4px solid black;
}

您将得到一个矩形边框，因为您的左右边框的宽度为0。因此，从边界的外角到内角的线是一条垂直线

但如果你这样做了

div
{
    border: 4px solid transparent;
    border-top: none;
    border-bottom: 4px solid black;
    height: 0px;
    width: 0px;
}

---

现在有左边界和右边界，即使你看不见它们。所以“看不见的线”上升4个像素，右上升4个像素（对于左下角）。在上面，浏览器不会痛，而在下面，它会涂成黑色。如果元素的高度（左/右边框）为0，宽度（上/下边框）为0，则边框的内角重叠，得到三角形。

为大小为0的空框的每个边框指定不同的颜色，您将看到4个三角形。边框在拐角处相交：）向任何边框添加透明颜色，然后查看剩下的内容。对所有或每个边框也使用边框宽度