html - 如何为 "progressed"部分创建一个带有反转文本颜色的进度条

Question

我尝试了几个小时，但没有找到任何有效的解决方案。任务是:创建一个具有动态宽度和居中标签的进度条，在进度和未进度部分之间更改其文本颜色。这是一张图片以供澄清:

如果我知道整个进度条的宽度，那么这很好用。但它不适用于响应式设计，因为它的宽度是自动计算的。

这是我的代码:

<div class="progress" style="width: 400px;">
 <div class="progressValue" style="width: 50%">
  <div class="progressInnerLabel" style="width: 400px;">I'm a progress text</div>
 </div>
 <div class="progressLabel">I'm a progress text</div>
</div>

还有我的 CSS:

.progress {
    position: relative;
}

.progressValue {
    overflow: hidden;
    position: absolute;
    height: 20px;
    background-color: blue;    
}

.progressInnerLabel {
    position: absolute;
    text-align: center; 
    color: white;  
    height: 20px;    
}

.progressLabel {
    background-color: #eee; 
    text-align: center; 
    color: black;    
}

我还创建了一个 fiddle ，因此您可以使用它:http://jsfiddle.net/Q82kF/2/

我想删除我的 html 的第一个 div (class = progress) 的 width: 400px，这样 progress 会自动获得完整的可用宽度。有人对此有解决方案吗？

我不想用 javascript(或任何 lib)来做。我认为必须有一个仅 CSS/HTML 的解决方案。

Answer 1

这可以通过使用clip-path: inset()来实现:

.progress {
  position: relative;
  display: flex;
  height: 100px;
  border: 3px solid #566573;
  border-radius: 8px;
  font-size: 50px;
  font-family: Courier, monospace;
  overflow: hidden;
}

.back {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  background: #5D6D7E;
  color: white;
}

.front {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: white;
  color: black;
  clip-path: inset(0 0 0 50%);
  -webkit-clip-path: inset(0 0 0 50%);
  transition: clip-path 1s linear;
}

<div class="progress">
  <div class="back">progress 100%</div>
  <div class="front">progress 100%</div>
</div>