如何将渐变进度条修改为箭头形状？

要保留原有进度条的渐变色彩、条纹滚动动画，同时把右侧改成箭头形状，可以通过CSS伪元素结合裁剪路径实现，以下是修改后的完整代码：

CSS代码 #

.progressbar {
  height: 15px;
  margin: 5px;
  background: 
    linear-gradient(-45deg,
      rgba(255, 255, 255, 0.15) 25%,transparent 25%, 
      transparent 50%, rgba(255, 255, 255, 0.15) 50%, 
      rgba(255, 255, 255, 0.15) 75%,transparent 75%) 
    left/30px 30px repeat-x,
    linear-gradient(to right, red 0%, yellow 50%, green 100%) left/var(--p,100%) fixed,
    lightgray;
  box-shadow: inset 0px -2px 5px rgba(0, 0, 0, 0.5);
  animation: change 1s linear infinite;
  position: relative;
  padding-right: 15px;
  box-sizing: border-box;
}

.progressbar::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: 15px;
  /* 和主进度条保持一致的渐变背景 */
  background: linear-gradient(to right, red 0%, yellow 50%, green 100%) right/var(--p,100%) fixed;
  /* 裁剪出向右的箭头形状 */
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  box-shadow: inset 0px -2px 5px rgba(0, 0, 0, 0.5);
}

@keyframes change {
  from {background-position:0 0,left}
  to {background-position:30px 0,left}
}

HTML代码 #

<div class="progressbar" style="width:80%;"></div>

核心修改说明 #

• 移除原进度条的border-radius，避免圆角破坏箭头的尖锐形状
• 用::after伪元素生成右侧箭头，通过clip-path绘制向右的三角形
• 给主容器添加padding-right，防止进度条的渐变内容被箭头遮挡
• 伪元素的背景和阴影与主容器保持一致，保证视觉风格统一
• 完整保留了原有的条纹滚动动画和色彩渐变效果

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