Angular进度条问题求助：第4段倾斜异常与文本换行问题

问题1：第4个进度段反向倾斜 #

原因是4个宽度25%的.progress元素加上margin-left:0.5%的总宽度超出容器，配合overflow:hidden截断后，最后一段的斜切变形视觉上呈现反向。调整方案：

• 移除.wrap div:first-child的负margin，避免整体偏移导致布局挤压
• 用calc()计算.progress的宽度，抵消margin占用的总空间，确保整体宽度不超过容器

问题2：进度框内文本换行 #

.progress内部的两个<div>是块级元素，默认垂直排列。只需将.progress改为flex布局，即可让内部元素横向并排并居中对齐。

修改后的完整代码 #

CSS

.wrap {
  width: 100%;
  height: 30px;
  z-index: -2;
  white-space: nowrap;
  overflow: hidden;
}

.progress {
  margin: 0;
  margin-left: 0.5%;
  height: 30px;
  /* 计算宽度：总宽度100%减去3个margin的总宽度(0.5%*3)，再平分给4个元素 */
  width: calc(25% - 0.375%);
  position: relative;
  /* flex布局实现文本横向并排 */
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px; /* 文本间的间距 */
  transition: all 0.8s;
}

.progress:before,
.progress:after {
  content: "";
  position: absolute;
  transition: all 0.8s;
  z-index: -1;
}

.progress:before {
  height: 50%;
  width: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.2);
  transform: skew(45deg);
}

.progress:after {
  height: 50%;
  width: 100%;
  top: 50%;
  left: 0;
  background: rgba(0, 0, 0, 0.2);
  transform: skew(-45deg);
}

.progress:hover:before,
.progress:hover:after {
  background: tomato;
}

HTML

<div class="wrap">
  <div class="progress">
    <div>MyData</div>
    <div>My Status</div>
  </div>
  <div class="progress">
    <div>MyData</div>
    <div>My Status</div>
  </div>
  <div class="progress">
    <div>MyData</div>
    <div>My Status</div>
  </div>
  <div class="progress">
    <div>MyData</div>
    <div>My Status</div>
  </div>
</div>

额外调整提示 #

• 如果需要保留第一个元素的左移效果，可以给它单独设置较小的负margin，同时微调calc()的宽度数值，确保总宽度不超出容器
• gap属性可根据需求调整文本间距，也可以用margin-right给第一个文本设置间距

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