在右侧绘制三角形
这个问题在这里已经有了答案：
这应该做到这一点（但我怀疑你可以没有图像的轮廓箭头 - 只有完整）。
.highlighted:after {
content: "";
position: absolute;
right: 0;
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right: 10px solid red;
}<ul>
<li>not highlighted</li>
<li>not highlighted</li>
<li class="highlighted">HIGHLIGHTED</li>
<li>not highlighted</li>
</ul>您可以使用变换和伪元素
li{
height: 20px;
line-height: 20px;
position: relative;
margin-bottom: 10px
}
li.highlighted:before, li.highlighted:after{
content: '';
position: absolute
}
li.highlighted:before{
width: 12px;
height: 12px;
right: 10px;
transform: rotate(45deg);
border-left: 2px solid red;
border-bottom: 2px solid red
}
li.highlighted:after{
height: 20px;
width: 2px;
right: 15px;
background: red;
top: -3px
}<ul>
<li>not highlighted</li>
<li>not highlighted</li>
<li class="highlighted">HIGHLIGHTED</li>
<li>not highlighted</li>
</ul>喜欢这个：
li{
position: relative;
}
.highlighted:after, .highlighted:before {
right: 0px;
top: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.highlighted:after {
border-color: rgba(255, 255, 255, 0);
border-right-color: #fff;
border-width: 6px;
margin-top: -6px;
}
.highlighted:before {
border-color: rgba(245, 23, 7, 0);
border-right-color: #f51707;
border-width: 9px;
margin-top: -9px;
}<ul>
<li>not highlighted</li>
<li>not highlighted</li>
<li class="highlighted">HIGHLIGHTED</li>
<li>not highlighted</li>
</ul>