如何实现填充50%且渐变效果固定的Gradient progress bar

你的问题出在内部div直接设置了width:50%，导致渐变背景跟着被压缩变形。要让渐变保持完整的色彩过渡，只显示50%的填充区域，可以用以下两种方法：

方法一：使用裁剪路径（clip-path） #

直接保留完整的渐变背景，通过裁剪只显示需要的50%区域：

body {
  background-color: #4158D0;
  background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
}

#progress {
  width: 50%;
  height: 20px;
  border: 5px solid #000;
  background: none;
  overflow: hidden; /* 确保裁剪内容不溢出 */
}

#progress > div {
  width: 100%; /* 保持渐变背景完整尺寸 */
  height: 100%;
  background: linear-gradient(-90deg, rgba(60, 226, 91, 1) 0%, rgba(255, 147, 0, 1) 50%, rgba(247, 3, 3, 1) 100%);
  clip-path: inset(0 50% 0 0); /* 裁剪掉右侧50%区域 */
}

<div id="progress">
  <div></div>
</div>

方法二：调整背景尺寸（background-size） #

让内部div的背景尺寸放大一倍，即使div宽度是50%，渐变也能保持完整过渡：

body {
  background-color: #4158D0;
  background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
}

#progress {
  width: 50%;
  height: 20px;
  border: 5px solid #000;
  background: none;
}

#progress > div {
  width: 50%;
  height: 100%;
  background: linear-gradient(-90deg, rgba(60, 226, 91, 1) 0%, rgba(255, 147, 0, 1) 50%, rgba(247, 3, 3, 1) 100%);
  background-size: 200% 100%; /* 背景宽度设为元素的2倍 */
  background-position: left; /* 显示背景的左半部分 */
}

<div id="progress">
  <div></div>
</div>

两种方法都能实现渐变色彩过渡完整、不随填充比例收缩变形的效果。

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