Question

我正在创建一个图表小部件，并希望根据完成的项目数在其上添加背景覆盖。

有没有一种方法可以确定例如有7个单元（项目），然后说已经完成了，那么这个阴影容器会覆盖屏幕的30％吗？但不是使用百分比，而是使用弹性项目的数量（3/7）？

.chart {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 0 15px;
  margin-bottom: 50px;
}

.dot-black {
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background: black;
}

.dot-grey {
  width: 22px;
  height: 22px;
  border-radius: 11px;
  background: grey;
}

.unit {
  flex: 1;
  display: flex;
  align-items: center;
}

.line-grey {
  height: 2px;
  background: grey;
  flex-grow: 1;
}

<div class="chart">
  <div class="unit">
    <div class="dot-black"></div>
    <div class="line-grey"></div>
    <div class="dot-grey"></div>
  </div>
  <div class="unit">
    <div class="line-grey"></div>
    <div class="dot-grey"></div>
  </div>
  <div class="unit">
    <div class="line-grey"></div>
    <div class="dot-grey"></div>
  </div>
  <div class="unit">
    <div class="line-grey"></div>
    <div class="dot-grey"></div>
  </div>
  <div class="unit">
    <div class="line-grey"></div>
    <div class="dot-grey"></div>
  </div>
  <div class="unit">
    <div class="line-grey"></div>
    <div class="dot-grey"></div>
  </div>
  <div class="unit">
    <div class="line-grey"></div>
    <div class="dot-grey"></div>
  </div>
  <div class="unit">
    <div class="line-grey"></div>
    <div class="dot-grey"></div>
  </div>
</div>
<div style="position: absolute; width: 80%; height: 300px; background: grey; border: solid 1px #000; opacity: 0.5; top: 0; left: 0;" />

Answer 1

考虑CSS变量，您可以轻松定义数字而不是百分比

.chart {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 0 15px;
  margin-bottom: 50px;
  position: relative;
}

.dot-black {
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background: black;
}

.dot-grey {
  width: 22px;
  height: 22px;
  border-radius: 11px;
  background: grey;
}

.unit {
  flex: 1;
  display: flex;
  align-items: center;
}
.line-grey {
  height: 2px;
  background: grey;
  flex-grow: 1;
}

.overlay {
  position: absolute;
  width: calc(var(--n,0) * (100% - 30px)/8); /* 2*15px padding and 8 items*/
  height: 50px;
  background: grey;
  border: solid 1px #000;
  opacity: 0.5;
  top: 0;
  left: 15px; /* padding */
}

<div class="chart">
  <div class="unit">
    <div class="dot-black"></div>
    <div class="line-grey"></div>
    <div class="dot-grey"></div>
  </div>
  <div class="unit">
    <div class="line-grey"></div>
    <div class="dot-grey"></div>
  </div>
  <div class="unit">
    <div class="line-grey"></div>
    <div class="dot-grey"></div>
  </div>
  <div class="unit">
    <div class="line-grey"></div>
    <div class="dot-grey"></div>
  </div>
  <div class="unit">
    <div class="line-grey"></div>
    <div class="dot-grey"></div>
  </div>
  <div class="unit">
    <div class="line-grey"></div>
    <div class="dot-grey"></div>
  </div>
  <div class="unit">
    <div class="line-grey"></div>
    <div class="dot-grey"></div>
  </div>
  <div class="unit">
    <div class="line-grey"></div>
    <div class="dot-grey"></div>
  </div>
  <div class="overlay" style="--n:2"></div>
</div>
<div class="chart">
  <div class="unit">
    <div class="dot-black"></div>
    <div class="line-grey"></div>
    <div class="dot-grey"></div>
  </div>
  <div class="unit">
    <div class="line-grey"></div>
    <div class="dot-grey"></div>
  </div>
  <div class="unit">
    <div class="line-grey"></div>
    <div class="dot-grey"></div>
  </div>
  <div class="unit">
    <div class="line-grey"></div>
    <div class="dot-grey"></div>
  </div>
  <div class="unit">
    <div class="line-grey"></div>
    <div class="dot-grey"></div>
  </div>
  <div class="unit">
    <div class="line-grey"></div>
    <div class="dot-grey"></div>
  </div>
  <div class="unit">
    <div class="line-grey"></div>
    <div class="dot-grey"></div>
  </div>
  <div class="unit">
    <div class="line-grey"></div>
    <div class="dot-grey"></div>
  </div>
  <div class="overlay" style="--n:4"></div>
</div>
<div class="chart">
  <div class="unit">
    <div class="dot-black"></div>
    <div class="line-grey"></div>
    <div class="dot-grey"></div>
  </div>
  <div class="unit">
    <div class="line-grey"></div>
    <div class="dot-grey"></div>
  </div>
  <div class="unit">
    <div class="line-grey"></div>
    <div class="dot-grey"></div>
  </div>
  <div class="unit">
    <div class="line-grey"></div>
    <div class="dot-grey"></div>
  </div>
  <div class="unit">
    <div class="line-grey"></div>
    <div class="dot-grey"></div>
  </div>
  <div class="unit">
    <div class="line-grey"></div>
    <div class="dot-grey"></div>
  </div>
  <div class="unit">
    <div class="line-grey"></div>
    <div class="dot-grey"></div>
  </div>
  <div class="unit">
    <div class="line-grey"></div>
    <div class="dot-grey"></div>
  </div>
  <div class="overlay" style="--n:8"></div>
</div>

根据柔性物品的数量确定容器的宽度

1 个答案: