Css 在右边框上画三角形

我有一个ul元素和许多li。某些线条（li）以黄色背景突出显示

我想在右边框添加一个三角形。这个三角形看起来应该像一个指向文本的箭头

大概是这样的：

我试着用右边框画这个三角形，但这并没有给我正确的形状

<ul>
    <li>not highlighted</li>
    <li>not highlighted</li>
    <li class="highlighted">HIGHLIGHTED</li>
    <li>not highlighted</li>
</ul>
<style>
.highlighted {
    border-right: 20px solid red;
}
</style>

未突出显示
未突出显示
突出显示
未突出显示

.突出显示{
右边框：20px纯红；
}

请在上写一个通知，一里可以容纳更多的一行，所以线的高度可以改变。固定高度的箭头（一行）就足够了

这可能吗？如果是，怎么做？

这应该可以做到（但我怀疑你不能在没有图像的情况下获得箭头轮廓-仅完整）

。突出显示：在{
内容：“；
位置：绝对位置；
右：0；
宽度：0；
身高：0；
边框顶部：10px实心透明；
边框底部：10px实心透明；
右边框：10px实心红色；
}

未突出显示
未突出显示
突出显示
未突出显示

像这样：

li{
位置：相对位置；
}
.highlighted:之后，.highlighted:之前{
右：0px；
最高：50%；
边框：实心透明；
内容：“；
身高：0；
宽度：0；
位置：绝对位置；
指针事件：无；
} 
.突出显示：之后{
边框颜色：rgba（255、255、255、0）；
右边框颜色：#fff；
边框宽度：6px；
利润上限：-6px；
} 
.突出显示：在{
边框颜色：rgba（245,23,7,0）；
右边框颜色：#f51707；
边框宽度：9px；
利润上限：-9px；
}

未突出显示
未突出显示
突出显示
未突出显示

您可以使用

li{
高度：20px；
线高：20px；
位置：相对位置；
边际下限：10px
}
李。突出显示：之前，李。突出显示：之后{
内容：''；
位置：绝对位置
}
李：之前{
宽度：12px；
高度：12px；
右：10px；
变换：旋转（45度）；
左边框：2倍纯红；
底部边框：2件纯红
}
李：之后{
高度：20px；
宽度：2倍；
右：15px；
背景：红色；
顶部：-3px
}

未突出显示
未突出显示
突出显示
未突出显示

你可以给我们一张图像，然后把李的背景画出来！把它放在你同时使用的两个代码>：< <代码> >代码>：< <代码> >：No1LeaveS4。你应该考虑接受这个作为正确的答案。更好的是，如果草图确实是他想要的。。。但这是一个很好的解决方案，我也投了赞成票。