可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

I'm looking for a HTML or ASCII character which is a triangle pointing up or down so that I can use it as a toggle switch.

I found ↑ (↑), and ↓ (↓) - but those have a narrow stem. I'm looking just for the HTML arrow "head".

回答1:

Unicode arrows heads:

▲ - U+25B2 BLACK UP-POINTING TRIANGLE

▲ and respectively if you cannot include Unicode characters directly (use UTF-8!).

Note that the font support for the smaller versions is not as good. Better to use the large versions in smaller font.

More Unicode arrows are at:

Lastly, these arrows are not ASCII, including ↑ and ↓: they are Unicode.

回答2:

For HTML Entities

▲ = ▲

回答3:

OPTION 1: UNICODE COLUMN SORT ARROWS

I found this one very handy for a single character column sorter. (Looks good upscaled).

IMPORTANT NOTE (When using unicode symbols)

Unicode support varies dependant on the symbol of choice, browser and the font family. If you find your chosen symbol does not work in some browsers then try using a different font-family. Microsoft recommend "Segoe UI Symbol" however it would be wise to include the font with your website as not many people have it on their computers.

Open this page in other browsers to see which symbols render with the default font.

Some more unicode arrows.

You can copy them right off the page below or you can use the code.

Each row of arrows is numbered from left to right:

0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F

Simply insert the corresponding number/letter before the closing semi-colon as above.

Additional HTML unicode symbols

A selected list of other helpful unicode icons/symbols.

OPTION 2: PURE CSS CHEVRONS

I recently made an article about creating Chevrons efficiently using only CSS (No Images required).

How to simply alter:

ROTATION
THICKNESS
COLOR
SIZE

>>> CLICK FOR DEMO

CSS (Efficient with Cross browser support)

.Chevron{     position:relative;     display:block;     height:50px;/*height should be double border*/ } .Chevron:before, .Chevron:after{     position:absolute;     display:block;     content:"";     border:25px solid transparent;/*adjust size*/ } /* Replace all text `top` below with left/right/bottom to rotate the chevron */ .Chevron:before{     top:0;     border-top-color:#b00;/*Chevron Color*/ } .Chevron:after{     top:-10px;/*adjust thickness*/     border-top-color:#fff;/*Match background colour*/ }

OPTION 3: CSS BASE64 IMAGE ICONS

UP/DOWN

DOWN

Using only a few lines of css we can encode our images into base64.

>>> CLICK FOR DEMO

PROS

No need to include additional resources in the form of images or fonts.
Supports full alpha transparancy.
Full cross browser support.
Small images/icons can be stored into a database.

CONS

Updating/editing can become a hassle.
Not suitable for large images due to excessive code markup that's generated.

CSS

.sorting, .sorting_asc, .sorting_desc{     padding:4px 21px 4px 4px;     cursor:pointer; } .sorting{     background:url(data:image/gif;base64,R0lGODlhCwALAJEAAAAAAP///xUVFf///yH5BAEAAAMALAAAAAALAAsAAAIUnC2nKLnT4or00PvyrQwrPzUZshQAOw==) no-repeat center right; } .sorting_asc{     background:url(data:image/gif;base64,R0lGODlhCwALAJEAAAAAAP///xUVFf///yH5BAEAAAMALAAAAAALAAsAAAIRnC2nKLnT4or00Puy3rx7VQAAOw==) no-repeat center right; } .sorting_desc{     background:url(data:image/gif;base64,R0lGODlhCwALAJEAAAAAAP///xUVFf///yH5BAEAAAMALAAAAAALAAsAAAIPnI+py+0/hJzz0IruwjsVADs=) no-repeat center right; }

回答4:

Sorry but they are only in Unicode. :(

Big ones:

U+25B2 (Black up-pointing triangle ▲)
U+25BC
U+25C0
U+25B6

Big white ones:

U+25B3 (White up-pointing triangle △)
U+25BD
U+25C1
U+25B7

There is also some smalller triangles:

U+25B4
U+25C2
U+25BE
U+25B8

Also some white ones:

U+25C3
U+25BF
U+25B9
U+25B5

There are also some "pointy" triangles. You can read more here in Wikipedia:
http://en.wikipedia.org/wiki/Geometric_Shapes

But unfortunately, they are all Unicode instead of ASCII. If you still want to use ASCII, then you can use an image file for it of just use ^ and v. (~~Just like the Google Maps in the mobile version~~ this was referring to the ancient mobile Google Maps)

As others also suggested, you can also create triangles with HTML, either with CSS borders or SVG shapes or even JavaScript canvases.

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

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

回答5:

Since you're using these arrows for a toggle switch you may want to consider creating these arrows with an html element using the following styles instead of unicode characters.

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

回答6:

How about these Unicode characters?

and respectively.

回答7:

There are several correct ways to display a down-pointing triangle.

Method 1 : use decimal HTML entity

HTML :

Method 2 : use hexidecimal HTML entity

HTML :

Method 3 : use character directly

HTML :

Method 4 : use CSS

HTML :

CSS :

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

Each of these three methods should have the same output. For other symbols, the same three options exist. Some even have a fourth option, allowing you to use a string based reference (eg.

You can use a reference website like Unicode-table.com to find which icons are supported in UNICODE and which codes they correspond with. For example, you find the values for the down-pointing triangle at http://unicode-table.com/en/25BC/.

If you want to know how to add support for less common UNICODE characters, see Create webfont with Unicode Supplementary Multilingual Plane symbols for more info on how to do this.

Background images

A totally different strategy is the use of background-images instead of fonts. For optimal performance, it's best to embed the image in your CSS file by base-encoding it, as mentioned by eg. @weasel5i2 and @Obsidian. I would recommend the use of SVG rather than GIF, however, is that's better both for performance and for the sharpness of your symbols.

This following code is the base64 for and SVG version of the

icon :

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

When to use background-images or fonts

For many use cases, SVG-based background images and icon fonts are largely equivalent with regards to performance and flexibility. To decide which to pick, consider the following differences:

SVG images

They can have multiple colors
They can embed their own CSS and/or be styled by the HTML document
They can be loaded as a seperate file, embedded in CSS AND embedded in HTML
Each symbol is represented by XML code or base64 code. You cannot use the character directly within your code editor or use an HTML entity
Multiple uses of the same symbol implies duplication of the symbol when XML code is embedded in the HTML. Duplication is not required when embedding the file in the CSS or loading it as a seperate file
You can not use color, font-size, line-height, background-color or other font related styling rules to change the display of your icon, but you can reference different components of the icon as shapes individually.
You need some knowledge of SVG and/or base64 encoding
Limited or no support in old versions of IE

Icon fonts

An icon can have but one fill color, one background color, etc.
An icon can be embedded in CSS or HTML. In HTML, you can use the character directly or use an HTML entity to represent it.
Some symbols can be displayed without the use of a webfont. Most symbols cannot.
Multiple uses of the same symbol implies duplication of the symbol when your character embedded in the HTML. Duplication is not required when embedding the file in the CSS.
You can use color, font-size, line-height, background-color or other font related styling rules to change the display of your icon
You need no special technical knowledge
Support in all major browsers, including old versions of IE

Personally, I would recommend the use of background-images only when you need multiple colors and those color can't be achieved by means of color, background-color and other color-related CSS rules for fonts.

The main benefit of using SVG images is that you can give different components of a symbol their own styling. If you embed your SVG XML code in the HTML document, this is very similar to styling the HTML. This would, however, result in a web page that uses both HTML tags and SVG tags, which could significantly reduce the readability of a webpage. It also adds extra bloat if the symbol is repeated across multiple pages and you need to consider that old versions of IE have no or limited support for SVG.

回答8:

"Not ASCII (neither's ↑/↓)" needs qualification.

While these characters are not defined in the American Standard Code for Information Interchange as glyphs, their codes WERE commonly used to give a graphical presentation for ASCII codes 24 and 25 (hex 18 and 19, CANcel and EM:End of Medium). Code page 437 (called Extended ASCII by IBM, includes the numeric codes 128 to 255) defined the use of these glyphs as ASCII codes and the ubiquity of these conventions permeated the industry as seen by their deployment as standards by leading companies such as HP, particularly for printers, and IBM, particularly for microcomputers starting with the original PC.

Just as the use of the ASCII codes for CAN and EM was relatively obsolete at the time, justifying their use as glyphs, so has the passage of time made the use of the codes as glyphs obsolete by the current use of UNICODE conventions.

It should be emphasized that the extensions to ASCII made by IBM in Extended ASCII, included not only a larger numeric set for numeric codes 128 to 255, but also extended the use of some numeric control codes, in the ASCII range 0 to 32, from just media transmission control protocols to include glyphs. It is often assumed, incorrectly, that the first 0 to 128 were not "extended" and that IBM was using the glyphs of conventional ASCII for this range. This error is also perpetrated in one of the previous references. This error became so pervasive that it colloquially redefined ASCII subliminally.

回答9:

I know I'm late to the party but you can accomplish this with plain CSS as well:

HTML:

(It can be any HTML element, if you're using an inline element like a for example, make sure you make it a block/inline-block element with display:block; or display:inline-block):

and

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);    }

You can also accomplish it using :before and :after pseudo-elements, which is actually a better way since you avoid creating extra markup. But that's up to you on how you'd like to accomplish it.

Here's a Demo in CodePen with many arrow possibilities.

回答10:

HTML Entities for empty triangles

△ = △

回答11:

I think the asker may be referring to one of these (see attached image) - I found this StackOverflow question while searching for the same thing myself.

Unfortunately, this glyph doesn't seem to exist as a distinct character entity anywhere. Wikipedia accomplishes it below by using inline javascript and img content="data:image/gif..." to achieve the symbol.

Incidentally, here's the base64 for it:

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

Hope this helps someone!

回答12:

▲) and U+25BC () respectively

回答13:

A lot of people here are suggesting to use the triangles, but sometimes you need a chevron.

We had a case where our button shows a chevron, and wanted the user's manual to refer to the button in a way which will be recognized by a non-technical user too. So we needed a chevron sign.

We used 〉 in the end. It is known as PRESENTATION FORM FOR VERTICAL RIGHT ANGLE BRACKET and its code is U+FE40.

回答14:

This one seems to imply that 030 and 031 are up and down triangles.

(As bobince pointed out, this doesn't seem to be an ASCII standard)

回答15:

回答16:

Usually, best is to see a character in his context.

Here is the full list of Unicode chars, and how your browser currently displays them. I am seeing this list evolving, browser versions after others.

This list is obtained by iteration in hex of the html entities unicode table, it may take some seconds, but is very useful to me in many cases.

var i = 0     do document.write(""+""+i+";"),i++     while (i

Here is a plain text extract, of arrows, some are coming with unicode 10.0. http://unicode.org/versions/Unicode10.0.0/

Unicode 10.0 adds 8,518 characters, for a total of 136,690 characters.

文章来源: What characters can be used for up/down triangle (arrow without stem) for display in HTML?

标签

ascii

down