JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li>
        <a href="#">Catering</a>
    </li>
    
    <li>
        <a href="#">Beer</a>
    </li>
    
    <li>
        <a href="#">Pizza and Spaghetti</a>
    </li>
</ul>

CSS

ul {
    margin: 20px;
}

li { 
    height: 20px;

    background: #000;
    float: left;
    
    margin:0 10px 0 0;
    position:relative;
}

a {
    padding: 10px;
}

/*
a:after,
*/
.triangle {
    /*
    content: '';
    */
    position: absolute;
    border: 40px solid transparent;
    border-top-color: blue;
    display:block;
    top:20px;
    left: 0;
}

JavaScript

/**/

$('a').each(function(){
    var self = $(this),
        width = (self.width() / 2) + 10; // +10 for <a> padding
    self.append('<span class="triangle" />');
    $('.triangle', self).css({
        'border-left-width' : width,
        'border-right-width' : width
    });
});

/**/