Hexagon shape btn-group

Question

我目前正在開發一個網站，設計團隊在這樣的購買過程中製作了一些進度條。

http://www.4shared.com/photo/4PPLguwXba/untitled.html

我使用的是引導和它所提供的組件將不會幫我做。無論如何，我可以做這樣的事情嗎？我只是發現了六角形的顏色填充，這不是我想要的。

在此先感謝！

Answer 1

這種方法可以讓您快速瞭解如何儘可能地接近1010儘管遠非完成。

$('.start').click(function() { 
 
    $('.start, .added').removeClass("startActive").removeClass("addedActive"); 
 
    $(this).toggleClass("startActive"); 
 
}); 
 
$('.added').click(function() { 
 
    $('.start, .added').removeClass("startActive").removeClass("addedActive"); 
 
    $(this).toggleClass("addedActive"); 
 
});

div { 
 
    display: inline-block; 
 
    height: 100px; 
 
    width: 200px; 
 
    border-top: 5px solid gray; 
 
    border-bottom: 5px solid gray; 
 
    position: relative; 
 
    text-align: center; 
 
    margin-left: -4px; 
 
} 
 
.start { 
 
    margin-left: 45px; 
 
} 
 
.start:before, 
 
.startActive:before { 
 
    content: ""; 
 
    position: absolute; 
 
    height: 70px; 
 
    width: 70px; 
 
    top: 12px; 
 
    left: -38px; 
 
    border-bottom: 5px solid gray; 
 
    border-left: 5px solid gray; 
 
    transform: rotate(45deg); 
 
} 
 
.startActive, 
 
.addedActive { 
 
    border-top: 5px solid red; 
 
    border-bottom: 5px solid red; 
 
} 
 
.startActive:before { 
 
    border-bottom: 5px solid red; 
 
    border-left: 5px solid red; 
 
} 
 
.added:before, 
 
addedActive:before { 
 
    content: ""; 
 
    position: absolute; 
 
    height: 70px; 
 
    width: 70px; 
 
    top: 12px; 
 
    left: -38px; 
 
    border-top: 5px solid gray; 
 
    border-right: 5px solid gray; 
 
    transform: rotate(45deg); 
 
} 
 
.start:after, 
 
.added:after, 
 
.addedActive:after, 
 
.startActive:after { 
 
    content: ""; 
 
    position: absolute; 
 
    height: 70px; 
 
    width: 70px; 
 
    top: 12px; 
 
    right: -38px; 
 
    border-top: 5px solid gray; 
 
    border-right: 5px solid gray; 
 
    transform: rotate(45deg); 
 
} 
 
.startActive:after { 
 
    border-top: 5px solid red; 
 
    border-right: 5px solid red; 
 
    z-index: 8; 
 
} 
 
.addedActive:before { 
 
    border-top: 5px solid red; 
 
    border-right: 5px solid red; 
 
    z-index: 8; 
 
} 
 
.addedActive:after { 
 
    border-top: 5px solid red; 
 
    border-right: 5px solid red; 
 
    z-index: 8; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="start">start</div> 
 
<div class="added">middle</div> 
 
<div class="added">end</div>

---

注：我不是在jQuery的最好的，雖然我已經加入 '活躍' 部分（點擊元素 '激活' 它）。