CSS Triangle

It's very easy to create css triangle using css border, and you can make classes for each direction as you need. Currently i have made triangle for ul listing using ::before Selector. You can see the below css triangle demo...

Demo

HTML

<ul class="triangleArrow">
    <li class="arrow-up"> Arrow up  </li>
    <li class="arrow-down"> Arrow down  </li>
    <li class="arrow-left"> Arrow left  </li>
    <li class="arrow-right"> Arrow right  </li>
</ul>

CSS

<style>
    .triangleArrow {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .triangleArrow li:before {
        width: 0;
        height: 0;
        font-size: 0;
        content: '.';
        display: inline-block;
        vertical-align: middle;
    }
    .arrow-up:before {
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        
        border-bottom: 10px solid #006BAF;
    }
    .arrow-down:before {
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        
        border-top: 10px solid #006BAF;
    }
    .arrow-left:before {
        border-top: 10px solid transparent;
        border-bottom: 10px solid transparent;
        
        border-left: 10px solid #006BAF;
    }
    .arrow-right:before {
        border-top: 10px solid transparent;
        border-bottom: 10px solid transparent;
        
        border-right: 10px solid #006BAF;
    }
</style>