響應式箭頭進度條帶有透明邊框

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％）。