如何为JavaScript控制的进度条末端添加三角形SVG箭头

方案一：使用SVG箭头（灵活可控） #

先修改HTML结构，给进度条填充层加上SVG箭头元素：

<div class="progress-container">
    <div class="progress__fill">
        <!-- 三角形SVG箭头，可自定义大小、颜色 -->
        <svg class="progress-arrow" viewBox="0 0 10 10" width="10" height="10">
            <polygon points="0,0 10,5 0,10" fill="currentColor"/>
        </svg>
    </div>
</div>

然后添加CSS样式，让箭头跟着进度条同步移动：

/* 进度条容器样式 */
.progress-container {
    width: 100%;
    height: 20px;
    background: #e0e0e0;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}

/* 进度填充层样式 */
.progress__fill {
    height: 100%;
    background: #2196F3;
    width: 0; /* 默认宽度，JS动态修改 */
    position: relative;
    padding-right: 12px; /* 给箭头预留空间，避免被截断 */
    box-sizing: border-box;
    transition: width 0.3s ease; /* 可选：添加平滑过渡动画 */
}

/* SVG箭头样式 */
.progress-arrow {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    color: #2196F3; /* 和进度条填充色保持一致 */
}

JS部分不需要大改，只要保证VALUE是带单位的有效字符串（比如"60%"、"250px"）即可：

function updateProgressBar(progressBar) {
    const VALUE = "60%"; // 替换成你的动态计算数值
    progressBar.querySelector(".progress__fill").style.width = VALUE;
}
const myProgressBar = document.querySelector(".progress-container");
updateProgressBar(myProgressBar);

方案二：使用CSS伪元素（无需额外HTML） #

如果不想加SVG元素，用CSS伪元素也能实现三角形箭头，HTML保持你原来的结构即可：

<div class="progress-container">
     <div class="progress__fill"></div>
</div>

对应的CSS样式：

.progress-container {
    width: 100%;
    height: 20px;
    background: #e0e0e0;
    border-radius: 10px;
    padding-right: 10px; /* 给箭头预留空间 */
    box-sizing: border-box;
}

.progress__fill {
    height: 100%;
    background: #2196F3;
    width: 0;
    position: relative;
    border-radius: 10px;
    transition: width 0.3s ease;
}

/* 用伪元素生成三角形箭头 */
.progress__fill::after {
    content: "";
    position: absolute;
    right: -10px;
    top: 50%;
    transform: translateY(-50%);
    /* 边框法生成三角形 */
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid #2196F3;
}

JS代码和之前完全一致，进度条宽度变化时，箭头会自动跟着末端移动。

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