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的最好的，虽然我已经加入 '活跃' 部分（点击元素 '激活' 它）。