如何只使用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/

然而我无法理解它是如何创建箭头的。有人能为我解释一下吗？

- user1943020

---

由于图像没有大小（宽度/高度），所以您看到的只是边框...边框宽度为4像素，可以分为4个部分（也称为三角形）...顶部、底部、左侧、右侧。 - jlewkovich

有点难以解释，但四周都有边框，彼此重叠。想象一个带有X的正方形..每个“切片”都是一个边框..透明的侧边框与顶部或底部的黑色边框重叠，从而呈现出箭头的外观。希望这有助于解释一点。如果需要澄清，请告诉我。 - Sean Thompson

嗯...我修改了你的JSFiddle，在这个JSFiddle中，我认为你可以清楚地看到它。http://jsfiddle.net/FrsGR/193/ - Bigxiang

@JL 请将其作为答案编写。 - Shomz

已经有答案了，但这里有一个动画版本：http://jsfiddle.net/xq8Ce/ - thgaskell

Answer 1

我之前不知道这个技巧，但现在我认为我理解了。底部边框并不是方形的，而是两侧倾斜的。左边框会在顶部和底部倾斜。这样做是为了使不同颜色的边框相遇更加清晰。由于箭头元素的高度和宽度为0，边框段在底部的宽度与您在边框规则中指定的宽度一样，但会缩小到0像素（容器的大小）。

您可以通过设置不同的边框厚度或更改边框规则的“侧面”来玩转这种效果。箭头始终指向规则中设置的相反方向。底部边框“指向”上方；右边框“指向”左侧。

下面是一个快速示意图：

左边是箭头技巧。右边是更典型的边框，其中容器具有一些尺寸。

- Surreal Dreams

Answer 2

取一个盒子，假设它高5像素，宽5像素。现在说它有一个4像素的边框。你应该想象出以下效果：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;
}

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

优秀的参考：CSS 三角形如何工作？

- Anthony

---

这是一个非常好的参考。很高兴看到我理解了它是如何工作的 :) - Surreal Dreams

Answer 3

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

您可以用这种方法看到 4px 半径正方形的所有四个象限：

.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/

- DrewP84