使用 css 创建箭头答案

【问题标题】：create arrow using css使用 css 创建箭头
【发布时间】：2014-07-31 04:33:33
【问题描述】：

我在 css 方面没有太多经验。但我想用html设计一个图表。我需要使用 css 设计更纤细的箭头 (link)。

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

【问题讨论】：

你试过什么？你至少尝试过google search..？有很多问题，小提琴，教程等可以满足您的需要......

标签： html css

【解决方案1】：

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

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) 更改箭头的外观。

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

希望对你有用。

【讨论】：

【解决方案2】：

尝试使用字体 awsome LINK

HTML：

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

【讨论】：