What Characters Can Be Used to Display Up and Down Triangle in HTML
Topic: HTML / CSSPrev|Next
Answer: Use the ▲
and ▼
Characters
You can simply use the HTML ▲
and ▼
hexadecimal character entities to display big up (▲) and down (▼) triangles on a web page. Alternatively, to display small up (▴) and down (▾) triangles you can use ▴
and ▾
character entities.
Let's try out the following example to understand how it basically works:
Example
Try this code »<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML Characters to Display Up/down Triangle</title>
</head>
<body>
<h2>Big triangles facing 4 directions</h2>
<p>▲ UP</p>
<p>▶ Right</p>
<p>▼ Down</p>
<p>◀ Left</p>
<hr>
<h2>Small triangles facing 4 directions</h2>
<p>▴ UP</p>
<p>▸ Right</p>
<p>▾ Down</p>
<p>◂ Left</p>
</body>
</html>
You can additionally apply the basic font properties like font-size
and color
to style these triangles. However, for best results use bigger version of the triangles. Let's check out an example:
Example
Try this code »<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Formatting of HTML Triangle Symbol</title>
<style>
.big-triangle{
font-size: 32px;
color: red;
}
.small-triangle{
font-size: 12px;
color: blue;
}
</style>
</head>
<body>
<p>
<span class="big-triangle">▼</span>
<br>
<span class="small-triangle">▼</span>
</p>
</body>
</html>
Related FAQ
Here are some more FAQ related to this topic: