如何仅使用 CSS 创建箭头？ [复制]

Posted 2023-03-06

【中文标题】如何仅使用 CSS 创建箭头？ [复制]

【英文标题】：How can I create an arrow using only CSS? [duplicate]

【发布时间】：2013-08-29 15:54:56

【问题描述】：

我看过下面的例子：

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

但是我无法理解它是如何创建箭头的。谁能帮我解释一下？

【问题讨论】：

由于图像没有大小（宽度/高度），您看到的只是边框...边框为 4px 宽，可以分为 4 个部分（也称为三角形）.. .上、下、左、右

有点难以解释，但所有 4 个边都有边界，并且相互重叠。想象一个带有 X 的正方形……每个“切片”都是一个边框……侧面（透明）边框与顶部或底部的黑色边框重叠，因此呈现出箭头的外观。希望这有助于解释一点。如果您需要澄清，请告诉我

哼....我修改了你的小提琴，在这个小提琴中，我想你可以看得很清楚。 jsfiddle.net/FrsGR/193

@JL 把它写成答案。

已经回答了，这里是动画版：jsfiddle.net/xq8Ce

【参考方案1】：

拿一个盒子。假设它高 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?

【讨论】：

这是一个很好的参考。很高兴看到我明白这是如何工作的:)

【参考方案2】：

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

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

这是一个快速图表：

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

【参考方案3】：

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

您可以这样查看半径为 4px 的正方形的所有四个象限：

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

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

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