Question

我目前正在开发一个网站，设计团队在这样的购买过程中制定了某种进度条。

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

我正在使用bootstrap，它提供的组件无法帮助我这样做。无论如何我可以做这样的事吗？我刚刚发现六边形的颜色填充，这不是我想要的。

提前致谢！

Answer 1

这种方法可以快速了解您可能如何接近此任务，尽管远未完成。

$('.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中最好的，虽然我添加了“活动”部分（点击元素以“激活”它）。

六角形btn组

1 个答案: