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.


<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.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.

Leave a Reply

Your email address will not be published. Required fields are marked *