我正在寻找一个HTML或ASCII字符,这是一个三角形指向向上或向下,以便我可以使用它作为拨动开关。

我找到了↑(↑)和↓(↓) -但它们的词干很窄。我只是寻找HTML箭头“头”。


当前回答

抱歉,它们只支持统一码。:(

大的:

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

其他回答

我知道我迟到了,但你也可以用普通的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中的一个演示,有许多箭头的可能性。

在空格修饰符字母块中有文字箭头:

U+02C2  ˂   &#706;  Modifier Letter Left  Arrowhead
U+02C3  ˃   &#707;  Modifier Letter Right Arrowhead
U+02C4  ˄   &#708;  Modifier Letter Up    Arrowhead
U+02C5  ˅   &#709;  Modifier Letter Down  Arrowhead

HTML实体 北京时报读者评论: ►= &#9658; ▼= &#9660; ▲= &#9650;

抱歉,它们只支持统一码。:(

大的:

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

由于您正在使用这些箭头作为拨动开关,您可能需要考虑使用以下样式而不是unicode字符在html元素中创建这些箭头。

.upparrow {
   height: 0;
   width: 0;
   border: 4px solid transparent;
   border-bottom-color: #000;
}

.downarrow {
   height: 0;
   width: 0;
   border: 4px solid transparent;
   border-top-color: #000;
}

http://jsfiddle.net/FrsGR/