使用css创建箭头

Question

我没有多少css经验。但我想在html中设计一个图表。我需要使用css设计更纤细的箭头（link）。

我想过使用图像，但我需要不同颜色的箭头。有没有可能通过添加透明箭头图像和动态添加颜色，如果是提供示例代码或任何其他建议也欢迎。请建议我。

Answer 1

尝试使用Font awesome LINK

<强> HTML：

<i class="fa fa-arrow-right"></i> fa-arrow-right

Answer 2

是的，有几种方法可以做到这一点。

1. 带图片

• 首先，为了做你建议的内容，你确实可以使用一张图片 - 但不是给箭头着色，而是在一个剪切背后着色箭头。

为此，请以支持透明度的文件格式创建箭头图像（PNG将是我的推荐）。例如，一个带有箭头形状的白色正方形“切出”它，使箭头完全透明（被白色包围）。它可能在Photoshop中看起来像这样;

• 现在，使用透明的PNG，将图像插入代码并用容器（如DIV）将其包围。然后，您可以设置DIV样式（而不是箭头），但箭头将显示为更改颜色。

您的HTML和CSS可能看起来像这样;

<div style="background-color: red; display: inline-block; font-size: 0;">
    <img src="arrow.png";>
</div>

background-color: ---;将确定箭头的颜色（您也可以使用十六进制值来获得更好的特异性 - 例如background-color: #CB0022;）。

display: inline-block;是一种可以控制包装DIV的方法。没有它，您的背景颜色将延伸到其父容器的整个宽度（可能是整个页面） - 打破您尝试创建的效果。或者，您也可以浮动DIV，但如果您希望箭头出现在文本中间，这将使问题复杂化。

font-size: 0;是图像周围出现额外空间的常见问题的一种可能解决方案（同样，在不应该出现的地方显示不需要的背景颜色）。

• 使用此技术的主要缺点是，根据您的精确布局/实现，操作图像可能会很复杂。此外，上述示例仅适用于具有白色背景的页面。如果您有各种背景颜色（或更详细/更复杂的背景，例如照片或图案），这可能是一个非常难以使用的解决方案，因为您的箭头“盒子”不太可能与它背后的相匹配。

2. 使用Unicode / HTML字符

• 您可以使用unicode字符将箭头写为实际文本，而不是使用图像。这些代码很多 - 可以在这里找到它们的示例：HTML Arrow Codes

例如，您的代码可能如下所示;

<p style="font-size: 2em;">Why don't you look over there? &#8594; &#8594;
... or down there? &#8601;</p>

在浏览器中看起来像这样;

然后你可以使用<span>标签进一步设置箭头的样式，以便像这样独立地改变它们的大小或颜色;

<p style="font-size: 1.5em;">Why don't you look over there?
<span style="font-size: 4em; color: blue;">&#8594;</span>
<span style="font-size: 2.5em; color: darkgreen;">&#8594;</span>
... or down there? <span style="font-weight: bold; color: #CC0000;">&#8601;</span></p>

看起来像这样;

这里的主要优点是您不会遇到与背景颜色匹配的问题，您可以使用代码（CSS）更轻松地更改箭头的外观。

缺点是在某些情况下，使用晦涩的字符和字体可能会因设备而显示不一致，原因很多，我现在不会给你带来负担。可以这么说，如果您更喜欢这种解决方案，请务必在您认为合适的不同机器上测试您的结果。

希望有用。