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

Question

我正在尝试构建一个进度条，如同在结帐时经常看到的一样。

的问题是，该箭头之间的边界是透明的，整个事情应该是响应。 我得到了这一步：

http://codepen.io/MrBambule/pen/rVBeoz

但我无法弄清楚如何获得吧的项目跨越（在笔红色边框）父容器的整个宽度和保持响应。
我想我可以弄明白，但我宁愿有一个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>

这是respon sive到屏幕的宽度。

它使用transform:skew属性为中间酒吧，并为两个远的元素一个小边界黑客。这导致输出如下图所示：

结果

注意

如果你（在同一直线上，并且希望他们全部）创建这些动态的，那么你就需要改变第一条CSS规则中的宽度（目前设置为23％）。