Live Demo: Creating Triangle or Caret Icons with CSS

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Creating Triangle or Caret Icons with CSS</title>
<style>
    /* Styles for border demo */
    .border-all {
        width: 0;
        height: 0;
        display: inline-block;
        border-width: 100px;
        border-style: solid;
        border-top-color: red;
        border-right-color: green;
        border-bottom-color: blue;
        border-left-color: orange;
    }
    /* Styles for caret icons */
    .caret {
        width: 0;
        height: 0;
        display: inline-block;
        border: 40px 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>
    <h2>Demonstration of How Borders are Applied on the Elements</h2>
    <div class="border-all"></div>
    <p>As you can see in the output above if we apply the transparent color on any three borders, the border remains with color will be displayed as triangle. Using that technique we can create our triangle or create icons, like this:</p>
    <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>