我使用▼和▲，但它们可能不适合您。我使用alt 11551为第一个和11550为第二个。如果你的系统的ascii不一样，你总是可以复制粘贴它们。

我使用▼和▲，但它们可能不适合您。我使用alt 11551为第一个和11550为第二个。如果你的系统的ascii不一样，你总是可以复制粘贴它们。

抱歉，它们只支持统一码。：(

大的:

U+25B2(黑色向上三角形▲) U+25BC(黑色向下三角形▼) U+25C0(左侧黑色三角形) U+25B6(黑色直角三角形▶)

白色的大家伙:

U+25B3(白色上三角△) U+25BD(白色下尖三角形) U+25C1(白色向左三角形对不对) U+25B7(白色直角三角形△)

还有一些更小的三角形:

U+25B4(黑色向上小三角▴) U+25C2(黑色左方小三角形◂) U+25BE(黑色向下小三角服务商服务商) U+25B8(黑色向右的小三角形)

还有一些白色的:

U+25C3(白色左方小三角◃) U+25BF(白色下尖小三角▿) U+25B9(白色指向右的小三角形▹) U+25B5(白色向上小三角▵)

还有一些“尖”三角形。你可以在维基百科上阅读更多内容:http://en.wikipedia.org/wiki/Geometric_Shapes

但不幸的是，它们都是Unicode而不是ASCII。 如果你仍然想使用ASCII，那么你可以使用^和v的图像文件(就像移动版本的谷歌地图，这是指古代移动谷歌地图)

---

正如其他人所建议的，您还可以使用HTML创建三角形，或者使用CSS边界或SVG形状，甚至JavaScript画布。

CSS

div{
    width: 0px;
    height: 0px;
    border-top: 10px solid black;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: none;
}

SVG

<svg width="16" height="10">
    <polygon points="0,0 16,0 8,10"/>
</svg>

JavaScript

var ctx = document.querySelector("canvas").getContext("2d");

// do not use with() outside of this demo!
with(ctx){
    beginPath();
    moveTo(0,0);
    lineTo(16,0);
    lineTo(8,10);
    fill();
    endPath();
}

Demo

我认为提问者可能指的是其中一个(见附图)-我自己在搜索同样的东西时发现了这个StackOverflow问题。

不幸的是，这个字形似乎在任何地方都不作为一个独特的字符实体存在。维基百科通过使用内联javascript和img content="data:image/gif…"来实现这个符号。

顺便说一句，这是它的base64:

data:image/gif;base64,R0lGODlhFQAJAIABAAAAAAAAACH/C1hNUCBEYXRhWE1QPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS4wLWMwNjAgNjEuMTM0Nzc3LCAyMDEwLzAyLzEyLTE3OjMyOjAwICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ4bXAuZGlkOjAxODAxMTc0MDcyMDY4MTE4OEM2REYyN0ExMDhBNDJFIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjdCNTAyODcwMEY4NjExRTBBMzkyQzAyM0E1RDk3RDc3IiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjdCNTAyODZGMEY4NjExRTBBMzkyQzAyM0E1RDk3RDc3IiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDUzUgTWFjaW50b3NoIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MDE4MDExNzQwNzIwNjgxMTg4QzZERjI3QTEwOEE0MkUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MDE4MDExNzQwNzIwNjgxMTg4QzZERjI3QTEwOEE0MkUiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4B//79/Pv6+fj39vX08/Lx8O/u7ezr6uno5+bl5OPi4eDf3t3c29rZ2NfW1dTT0tHQz87NzMvKycjHxsXEw8LBwL++vby7urm4t7a1tLOysbCvrq2sq6qpqKempaSjoqGgn56dnJuamZiXlpWUk5KRkI+OjYyLiomIh4aFhIOCgYB/fn18e3p5eHd2dXRzcnFwb25tbGtqaWhnZmVkY2JhYF9eXVxbWllYV1ZVVFNSUVBPTk1MS0pJSEdGRURDQkFAPz49PDs6OTg3NjU0MzIxMC8uLSwrKikoJyYlJCMiISAfHh0cGxoZGBcWFRQTEhEQDw4NDAsKCQgHBgUEAwIBAAAh+QQBAAABACwAAAAAFQAJAAACF4yPgMsJ2mJ4VDKKrd4GVz5lYPeMiVUAADs=

希望这能帮助到一些人!

我知道我迟到了，但你也可以用普通的CSS来完成这个:

HTML:

(它可以是任何HTML元素，如果你正在使用一个内联元素，例如<span>，确保你使它成为一个block/内联块元素display:block;或显示:inline-block):

<div class=“up”></div>

and

<div class=“down”></div>

CSS:

.up {
   height:0;
   width:0;
   border-top:100px solid black;
   border-left:100px solid transparent;
   transform:rotate(-45deg);   
  }

.down {
   height:0;
   width:0;
   border-bottom:100px solid black;
   border-right:100px solid transparent;
   transform:rotate(-45deg); 
  }

您还可以使用:before和:after伪元素来完成它，这实际上是一种更好的方法，因为您可以避免创建额外的标记。但这取决于你想如何完成它。

--

这是CodePen中的一个演示，有许多箭头的可能性。

有几种正确的方法来显示指向下的三角形。

方法一:使用十进制HTML实体

HTML:

▼

---

方法二:使用十六进制HTML实体

HTML:

▼

---

方法三:直接使用字符

HTML:

▼

---

方法四:使用CSS

HTML:

<span class='icon-down'></span>

CSS:

.icon-down:before {
    content: "\25BC";
}

---

这三个方法中的每一个都应该有相同的输出。对于其他符号，同样存在三个选项。有些甚至有第四个选项，允许您使用基于字符串的引用(例如。心;显示♥)。

您可以使用类似Unicode-table.com的参考网站来查找UNICODE支持哪些图标以及它们对应的代码。例如，您可以在http://unicode-table.com/en/25BC/上找到指向下的三角形的值。

请注意，这些方法仅对每个浏览器中默认可用的图标有效。对于像☃，´，★，☂，☭，⎗或⎘这样的符号，这种情况的可能性要小得多。虽然可以为其他UNICODE符号提供跨浏览器的支持，但这个过程有点复杂。

如果你想知道如何添加对不太常见的UNICODE字符的支持，请参阅使用UNICODE补充多语言平面符号创建webfont以获得更多关于如何做到这一点的信息。

---

背景图片

一个完全不同的策略是使用背景图片而不是字体。为了获得最佳性能，最好通过基本编码将图像嵌入到CSS文件中，如eg所述。@weasel5i2和@Obsidian。我建议使用SVG而不是GIF，因为它在性能和符号的清晰度方面都更好。

下面的代码是图标的base64和SVG版本:

/* size: 0.9kb */
url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMTYiIGhlaWdodD0iMjgiIHZpZXdCb3g9IjAgMCAxNiAyOCI+PGcgaWQ9Imljb21vb24taWdub3JlIj48L2c+PHBhdGggZD0iTTE2IDE3cTAgMC40MDYtMC4yOTcgMC43MDNsLTcgN3EtMC4yOTcgMC4yOTctMC43MDMgMC4yOTd0LTAuNzAzLTAuMjk3bC03LTdxLTAuMjk3LTAuMjk3LTAuMjk3LTAuNzAzdDAuMjk3LTAuNzAzIDAuNzAzLTAuMjk3aDE0cTAuNDA2IDAgMC43MDMgMC4yOTd0MC4yOTcgMC43MDN6TTE2IDExcTAgMC40MDYtMC4yOTcgMC43MDN0LTAuNzAzIDAuMjk3aC0xNHEtMC40MDYgMC0wLjcwMy0wLjI5N3QtMC4yOTctMC43MDMgMC4yOTctMC43MDNsNy03cTAuMjk3LTAuMjk3IDAuNzAzLTAuMjk3dDAuNzAzIDAuMjk3bDcgN3EwLjI5NyAwLjI5NyAwLjI5NyAwLjcwM3oiIGZpbGw9IiMwMDAwMDAiPjwvcGF0aD48L3N2Zz4=

何时使用背景图像或字体

对于许多用例来说，基于svg的背景图像和图标字体在性能和灵活性方面是相当的。要决定选择哪一个，请考虑以下差异:

SVG图像

它们可以有多种颜色 它们可以嵌入自己的CSS和/或由HTML文档设置样式 它们可以作为一个单独的文件加载，嵌入到CSS和HTML中 每个符号都由XML代码或base64代码表示。不能在代码编辑器中直接使用字符或使用HTML实体 当XML代码嵌入到HTML中时，多次使用同一符号意味着重复该符号。在CSS中嵌入文件或将其作为单独的文件加载时，不需要复制 您不能使用颜色、字体大小、行高、背景颜色或其他与字体相关的样式规则来更改图标的显示，但您可以将图标的不同组件单独引用为形状。 您需要了解SVG和/或base64编码 旧版本IE的支持有限或不支持

图标的字体

一个图标只能有一种填充色、一种背景色等。 图标可以嵌入到CSS或HTML中。在HTML中，可以直接使用字符，也可以使用HTML实体来表示字符。 一些符号可以在不使用webfont的情况下显示。大多数符号都不能。 当你的字符嵌入到HTML中时，多次使用同一个符号意味着重复该符号。在CSS中嵌入文件时，不需要复制。 您可以使用颜色、字体大小、行高、背景色或其他与字体相关的样式规则来更改图标的显示 你不需要特殊的技术知识 支持所有主流浏览器，包括旧版本的IE

就我个人而言，只有当你需要多种颜色，而这些颜色无法通过颜色、背景颜色和其他与字体颜色相关的CSS规则来实现时，我才会推荐使用background-images。

使用SVG图像的主要好处是可以为符号的不同组件赋予它们自己的样式。如果您将SVG XML代码嵌入到HTML文档中，这与样式化HTML非常相似。然而，这将导致网页同时使用HTML标记和SVG标记，这可能会显著降低网页的可读性。如果符号在多个页面中重复出现，还会增加额外的负担，而且您需要考虑到旧版本的IE没有或有限支持SVG。