WEB TUTORIALS
PRACTICE EXAMPLES
HTML REFERENCES
CSS REFERENCES
PHP REFERENCES

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:

<!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>&#x25B2; UP</p>
    <p>&#x25B6; Right</p>
    <p>&#x25BC; Down</p>
    <p>&#x25C0; Left</p>
    <hr>
    <h2>Small triangles facing 4 directions</h2>
    <p>&#x25B4; UP</p>
    <p>&#x25B8; Right</p>
    <p>&#x25BE; Down</p>
    <p>&#x25C2; 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:

<!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">&#x25BC;</span>
        <br>
        <span class="small-triangle">&#x25BC;</span>
    </p>
</body>
</html>

Related FAQ

Here are some more FAQ related to this topic:

Bootstrap UI Design Templates Property Marvels - A Leading Real Estate Portal for Premium Properties