如何为li元素右侧添加指向右侧的三角形箭头？

现有代码 #

HTML代码 #

<ul class="steps d-flex">
   <li class="step">Basic Details<div class="triangle triangle-right"></div></li>
</ul>

CSS（Sass）代码 #

.steps li {
    @extend .text-center;
    position: relative;
    overflow: hidden;
    flex: 1 1;
    align-items: center;
    justify-content: center;
    background: $grey-600;
}

效果说明 #

• 当前效果：
• 目标效果：参考示例中Payment项右侧指向Done项的三角形样式，

实现方案 #

核心思路 #

利用CSS边框绘制三角形，通过绝对定位将其放置在列表项右侧，调整样式让它与后续步骤自然衔接。

方案1：基于现有HTML结构修改 #

1. 移除.steps li中的overflow: hidden（否则三角形会被裁剪）
2. 为.triangle-right添加样式：

.triangle-right {
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    /* 三角形尺寸匹配列表项高度，数值为列表项高度的一半 */
    border-top: 25px solid transparent;
    border-bottom: 25px solid transparent;
    /* 颜色与当前步骤背景色一致 */
    border-left: 25px solid $grey-600;
    /* 向右偏移，完全衔接下一个步骤 */
    transform: translateX(100%);
}

方案2：使用伪元素（无需额外HTML标签） #

如果不想保留HTML中的.triangle元素，用::after伪元素实现更简洁：

.steps li {
    @extend .text-center;
    position: relative;
    /* 移除overflow: hidden */
    flex: 1 1;
    display: flex; /* 确保align-items/justify-content生效 */
    align-items: center;
    justify-content: center;
    background: $grey-600;
}

.steps li::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-top: 25px solid transparent;
    border-bottom: 25px solid transparent;
    border-left: 25px solid $grey-600;
    transform: translateX(100%);
}

/* 最后一个步骤隐藏三角形 */
.steps li:last-child::after {
    display: none;
}

关键注意事项 #

• 三角形的border-top/border-bottom数值必须等于列表项高度的一半，才能让三角形充满整个步骤项高度
• 若后续步骤有不同背景色，当前步骤三角形的border-left颜色需与自身背景色一致，自然衔接后续步骤的背景
• 通过transform: translateX(100%)可避免步骤项之间出现缝隙

内容的提问来源于stack exchange，提问作者KTOV