带有透明边框的响应式箭头进度条

Question

我正在尝试建立一个在结账时经常看到的进度条。

问题是，箭头之间的边界是透明的，整个东西应该响应。我已经知道了：

但我不知道如何让栏的项目跨越 父容器的整个宽度（钢笔中的红色边框）并保持响应。
我想我可以用 JS 解决这个问题，但我宁愿有一个 CSS 解决方案。
将不胜感激。

HTML

<ul class="progress-nav">
  <li class="active">
    <span>1. FOO</span>
  </li>
  <li>
    <span>2. BAR</span>
  </li>
  <li>
    <span>3. BAZ</span>
  </li>
</ul>

CSS

$bar-color: rgba(255, 255, 255, 0.2);
$bar-active-color: rgba(255, 255, 255, 0.6);
$arrow-size: 22px;

body {
  background: linear-gradient(left, #803689, #5eb6e4);
}

.progress-nav {
  position: relative;
  font-size: 0;
  margin: 100px auto;
  width: 80%;
  max-width: 900px;

  // dummy border to display the width problem 
  border: 1px solid red;

  li {
    position: relative;
    color: #fff;
    font-size: 12px;
    display: inline-block;
    width: 20%;
    margin-right: 48px;
    list-style: none;
    background: $bar-color;
    padding: $arrow-size 0;

    transition: background .5s, color .5s;

    span {
      position: absolute;
      width: 100%;
      top: 50%;
      left: 50%;
      transform: translateX(-33px) translateY(-35%);
    }

    &:before,
    &:after {
      content: '';
      position: absolute;
      display: block;
      top: 0;

      transition: all .5s;
    }
    &:before {
      border: $arrow-size solid $bar-color;
      border-left-color: transparent;
      left: -$arrow-size*2;
    }
    &:after {
      border: $arrow-size solid transparent;
      border-left-color: $bar-color;
      right: -$arrow-size*2;
    }
    &:first-child:before {
      border: none;
      width: $arrow-size*2;
      height: $arrow-size*2;
      background: $bar-color;
      border-radius: 4px 0 0 4px;
    }
    &:last-child:after {
      border: none;
      right: -$arrow-size;
      width: $arrow-size;
      height: $arrow-size*2;
      background: $bar-color;
      border-radius: 0 4px 4px 0;
    }

    &.active,
    &:hover {
      background: $bar-active-color;
      color: #000;

      &:before {
        border-color: $bar-active-color;
        border-left-color: transparent;
      }
      &:after {
        border-left-color: $bar-active-color;
      }
      &:first-child:before,
      &:last-child:after {
        background: $bar-active-color;
      }
    }
  }
}

Answer 1

你可以使用类似的东西：

.wrap {
  width: 100%;
  height: 30px;
  z-index:-2;white-space: nowrap;
  overflow:hidden;
}
.wrap div:first-child{margin-left:-2%;}
.progress {
  margin:0;
  margin-left:0.5%;
  height: 30px;
  width: 25%;
  position: relative;
  display: inline-block;
  text-align: center;
  line-height: 30px;
  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);
  -webkit-transform: skew(45deg);
  -moz-transform: skew(45deg);
  transform: skew(45deg);
}
.progress:after {
  height: 50%;
  width: 100%;
  top: 50%;
  left: 0;
  background: rgba(0, 0, 0, 0.2);
  -webkit-transform: skew(-45deg);
  -moz-transform: skew(-45deg);
  transform: skew(-45deg);
}
.progress:hover:before,
.progress:hover:after {
  background: tomato;
}

<div class="wrap">
  <div class="progress">
    simple
  </div>
  <div class="progress">
    as
  </div>
  <div class="progress">
    complex
  </div>
  <div class="progress">
    Web Development
  </div>
</div>

响应屏幕宽度。

中间条使用 transform:skew 属性，两个远元素使用小边框。这导致如下所示的输出：

结果

注意

如果您动态创建这些（并希望它们都在同一行），那么您将需要更改第一个 css 规则中规定的宽度（当前设置为 23%）。

带有透明边框的响应式箭头进度条

Responsive arrow progress bar with transparent borders

html

css

sass

progress-bar

结果