使用CSS绘制三角形

2018-07-02 02:25:16

这个问题在这里已经有了答案：

CSS三角形如何工作？ 18个答案

相邻的边界不能重叠。为了绘制边框，浏览器从边框的外角向边框的内角绘制一条不可见的直线。每个边界仅适用于该线的一侧。

所以，如果你设置

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宽度（对于顶部/底部边界），则边界的内角重叠，然后得到该三角形。

链接地址: http://www.djcxy.com/p/89487.html