CSS Triangular List Bullets – Arrow List Style

If you feel like the default style of a HTML list is boring, you can try applying these styles to make triangular list bullets.

HTML

<ul class="custom-list">
	<li>Video Games</li>
	<li>Android Games</li>
	<li>Android Apps</li>
	<li>iOS Games</li>
	<li>iOS Apps</li>
</ul>

CSS

ul.custom-list {
    list-style: none;
}
ul.custom-list li:before { 
    content: "";
    height: 0;
    width: 0;
    border-color: transparent #fcb400;
    border-style: solid;
    border-width: 0.5em 0 0.5em 0.5em;
    position: relative;
    display: block;    
    left: -1em;
    top: 1.25em;    
}

The position and color of the arrows can be adjusted to suit your design.