【问题标题】:Hexagon shape btn-group [closed]六边形 btn-group [关闭]
【发布时间】:2015-04-11 20:17:39
【问题描述】:

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

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

我正在使用引导程序,它提供的组件无法帮助我做到这一点。无论如何我可以做这样的事情吗?我刚刚发现填充了颜色的六边形形状,这不是我想要的。

提前致谢!

【问题讨论】:

  • 你有没有尝试过?
  • 是的,我看了很多网站,这里有一些。 jtauber.github.io/articles/css-hexagon.htmlcsshexagon.com
  • 欢迎来到 SO。您的问题对于 SO 来说太宽泛了。它缺乏对代码的适当尝试。尽管如此,也许thisthis 可以提供帮助。
  • 感谢您的回答,帮助很大!下次我将尝试更好地说明我的问题并尝试许多其他解决方案!

标签: html css twitter-bootstrap twitter-bootstrap-3 css-shapes


【解决方案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,虽然我添加了“活动”部分(单击元素以“激活”它)。

【讨论】:

  • 谢谢伙计,它工作得很好,这就是我所需要的。它让我在项目中取得了成功!
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2017-02-22
  • 2016-07-18
  • 1970-01-01
  • 1970-01-01
  • 2015-03-22
  • 2020-07-26
相关资源
最近更新 更多