“怎么做？”；CSS箭头“；工作

我见过几个“CSS箭头”的例子——基本上是用纯CSS制作的箭头/三角形。示例如下：

……等等

然而，无论我多么深入地研究它们，我都不知道它实际上是如何工作的，以及为什么会生成箭头

以这个小例子为例，改编自第一个链接：

。向上箭头{
宽度：0；
身高：0；
左边框：50px实心透明；
右边框：50px实心透明；
边框底部：50px纯黑；
}

---

如何在0x0正方形周围绘制50像素的边框

制作一个100x100的正方形

#########
#########
#########
#########
#########

但是，如何独立控制所有四条边

将正方形切成4个三角形。每个三角形都是一段完整的边框，但由于边框的厚度为50px，因此它实际上由四个不同的实心边框楔块组成：

  #########
#   #####   #
###   #   ###
####     ####
###   #   ###
#   #####   #
  #########

现在，使顶部、左侧和右侧三角形透明，左侧只有底部边界，形成向上指向的三角形

      #    
    #####   
  #########

左边是一个指向上的三角形，颜色为底边

下面是一个使用越来越大的边框宽度的演示：

div{
利润率：10px；
}
#一个{
宽度：90px；
高度：90px；
边框顶部：5px纯蓝色；
左边框：5px纯红；
右边框：5px纯绿色；
边框底部：5px纯黑；
}
#两个{
宽度：50px；
高度：50px；
边框顶部：25px纯蓝色；
左边框：25px实心红色；
右边框：25px纯绿；
边框底部：25px纯黑；
}
#三{
宽度：0；
身高：0；
边框顶部：50px纯蓝；
左边框：50px纯红；
右边框：50px纯绿；
边框底部：50px纯黑；
}
#四{
宽度：0；
身高：0；
边框顶部：50px实心透明；
左边框：50px实心透明；
右边框：50px实心透明；
边框底部：50px纯黑；
}

首先，让我们制作一个100x100px的盒子。我们将使用5px边框和90x90px内容区

接下来，让我们将长方体变小，但使边框变大。您应该开始了解这四个边界是如何独立控制的。我们将使用一个50x50px的盒子和一个25px的边框

现在我们将长方体缩小到0x0，所有边上都有一个50像素的边框。现在，没有盒子，只有边界。现在很明显，随着边框的增大和内容的缩小，边框将沿拐角以45度角剪切

最后，如果我们使顶部、左侧和右侧边界透明，那么构成底部边界的下部三角形就是左侧

可能会澄清将正方形切割成四个三角形的部分，除此之外，还有可靠的解释