如何仅使用CSS创建箭头？

Question

我见过以下例子：

.arrow {
   height: 0;
   width: 0;
   border: 4px solid transparent;
}
.arrow.up {
   border-bottom-color: #000;
}
.arrow.down {
   border-top-color: #000;
}

http://jsfiddle.net/FrsGR/

然而我无法理解它是如何创造箭头的。有人可以帮我解释一下吗？

Answer 1

我以前不知道这个伎俩，但我想我明白了。底部边框不是方形，两侧是斜面。左边框将在顶部和底部倾斜。这是不同颜色的边框干净地相遇。由于箭头元素的高度和宽度为0，因此边框线段的宽度与边框规则中指定的一样宽，但缩小为宽度0px（容器的大小）。

您可以通过设置不同的边框粗细或更改边框规则的“边”来播放效果。 “箭头”始终指向规则中设置的方向。底部边界“指向”;右边界“点”左边。

这是一个快速图表：

左边是箭头戏法。右边是一个更典型的边框，容器有一些尺寸。

Answer 2

拿一个盒子。假设它高5像素，宽5像素。现在说它有一个4px的边框。这是你应该想象的：http://jsfiddle.net/FrsGR/190。

.arrow { // box
   height: 5px;
   width: 5px;
   border: 4px solid blue;
}

现在想象一下这个框没有宽度或高度，所以你只剩下边框：http://jsfiddle.net/FrsGR/885/。

.arrow { // box with no width/height
   height: 0;
   width: 0;
   border: 4px solid blue;
}

它们现在彼此重叠，这就是创造箭头时神奇发生的地方。从每个角到中心对角线绘制重叠线。因此，最终结果是顶部，左侧和右侧的透明三角形，底部有一个黑色三角形。希望有所帮助！

很好的参考：How do CSS triangles work?

Answer 3

CSS正在创建一个边界周围的边框（没有宽度/高度，但有一些x，y坐标），尺寸为4px，如.arrow中所指定。这就像创建一个半径为4px的圆，除了由于CSS边框的性质，“圆”实际上是一个正方形。

你可以通过这种方式看到4px半径方形的所有四个quandrants：

.arrow.up {
    border-top-color:blue;
    border-right-color:green;
    border-left-color:red;
   border-bottom-color: #000;
}

这是一个放大的示例，使用40px而不是4px的大小：

http://jsfiddle.net/dqB32/1/