Skip to content
Related Articles
Open in App
Not now

Related Articles

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

Improve Article
Save Article
Like Article
  • Last Updated : 30 Jun, 2022
Improve Article
Save Article
Like Article

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=
        Data Structures & Algorithms
    </a>
      
    <p>
        Click the above DSA link 
        to find more information
    </p>
</body>
  
</html>

We include it by replacing ‘U +’ with ‘\’ before the Unicode.

Output:

 


My Personal Notes arrow_drop_up
Like Article
Save Article
Related Articles

Start Your Coding Journey Now!