Advertisements
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:
- How to create triangle or caret icons using CSS
- How to show hide dropdown menu on mouse hover using CSS
- How to create a vertical line in HTML
Advertisements
