使用CSS绘制三角形

Question

我最近发现三角形可以使用纯css创建，使用div上的border属性，宽度为0。虽然使用css很简单，但我很好奇如何通过使border-left和border-right透明使箭头向上？

据我所知，当我们将border-bottom设置为10px并制作左右边框时，它应该变成一个矩形而不是一个侧边透明的三角形。

请解释一下这是如何运作的。我确信我错了，但对澄清感到好奇。

Answer 1

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

所以，如果你设置

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;
}

现在有左右边界，即使你看不到它们。因此，＆＃39;不可见线＆＃39;上升4像素，右上4像素（左下角）。在上方，浏览器不会感到疼痛，而在下方则会显示黑色。如果元素的高度为0（左/右边框）或0宽度（顶部/底部边框），则边框的内角重叠，然后得到该三角形。