What characters can be used for up/down triangle (arrow without stem) for display in HTML ?

Last Updated : 30 Jun, 2022

In this article, we will see what characters can be used for up/down triangles (arrow without stem) for display in HTML.

Unicode is a simple and quick way to add basic characters to your web page. It doesn’t require external requests and it cuts down on page load time. It doesn’t require an image to be included, which means that it can be adjusted manually.

Approach: Unicode can be used in both your HTML and CSS in two slightly different ways. So, here is the Unicode for various arrowheads:

▲ – U+25B2 – Black up-pointing triangle without stem
▼ – U+25BC – Black down-pointing triangle without stem
▴ – U+25B4 – Small black up-pointing triangle without stem
▾ – U+25BE – Small black up-pointing triangle without stem

Note: Don’t forget to add ‘;’ after the Unicode.

Example 1: This example describes the use of the Unicode that can display up/down triangles in HTML.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1.0"> 
    <title>Using Unicode Characters</title> 
</head> 
  
<body> 
    <h2>Welcome To GFG</h2> 
    <p> 
        You can find more  
        information below ▼ 
    </p> 
</body> 
  
</html>

Output:

You can also use CSS to use Unicode characters. This is done by using pseudo-elements like ::before & ::after selectors. The benefits of using Unicode in your CSS is that it can be styled independently.

Example 2: In this example, we want to display an up/down triangle after an <p> HTML element, using CSS.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1.0"> 
    <title>Using Unicode Characters</title> 
      
    <style> 
        p::after { 
            content: '\25BC'; 
        } 
    </style> 
</head> 
  
<body> 
    <h2>Welcome to GeeksforGeeks</h2> 
      
    <a href= 
"https://www.geeksforgeeks.org/data-structures/"> 
        Data Structures & Algorithms 
    </a> 
      
    <p> 
        Click the above DSA link  
        to find more information 
    </p> 
</body> 
  
</html>