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
- Arrow up
- Arrow down
- Arrow left
- Arrow right
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>