WEB TUTORIALS
PRACTICE EXAMPLES
HTML REFERENCES
CSS REFERENCES
PHP REFERENCES

How to create triangle or caret icons using CSS

Topic: HTML / CSSPrev|Next

Answer: Use transparent color for borders

You can easily create triangle or caret icons pointing up, down, left or right directions using the combination of transparent and solid colors for the borders of elements that doesn't have any CSS width and height. Let's check out an example to understand how it really works:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Making Directional Triangle or Caret Icons with CSS</title>
<style>
    .caret {
        width: 0;
        height: 0;
        display: inline-block;
        border: 10px solid transparent;
    }
    .caret.down{
        border-top-color: black;
    }
    .caret.right{
        border-left-color: black;
    }
    .caret.up{
        border-bottom-color: black;
    }
    .caret.left{
        border-right-color: black;
    }
</style>
</head>
<body>
    <h3>Triangle or Caret Icon Pointing Down</h3>
    <div><span class="caret down"></span></div>
    <hr>
    <h3>Triangle or Caret Icon Pointing Right</h3>
    <div><span class="caret right"></span></div>
    <hr>
    <h3>Triangle or Caret Icon Pointing Up</h3>
    <div><span class="caret up"></span></div>
    <hr>
    <h3>Triangle or Caret Icon Pointing Left</h3>
    <div><span class="caret left"></span></div>
</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