Question

我试图为我正在研究的网络创建某种热图。我想使用一个蜂箱，因为它看起来很花哨，给了我很大的空间利用率。

如果找到这个网站，我想出如何使用纯CSS的六边形。但它依赖于严重的行和偏移量。我的整个UI都是KnockoutJS驱动的，并且在任何给定时间都在网络上拥有动态数量的PC。（主要是码头集装箱上升或下降）。

群集可以在1到n + 1个节点之间变化。

我查看了这个网站：CSS Hexagon 并找到了几种管理六边形的解决方案，但它们的动态使用都非常有限。

这是预期的代码：

 <div class="panel-body>
      {{noescape "<!-- ko foreach: { data: vm.dash().nodes, as: 'node' } -->" }}
          <span class="flex-span" data-bind="attr: { 'id': node.id }, css: { up: node.Status == 2, down: node.Status != 2 }">&#x2B22;</span>
      {{noescape "<!-- /ko -->"}}
 </div>

基于此，它会给六边形提供一个指示上/下的颜色

我已经用我的弹箱概念掀起了一个非淘汰小提琴，但我并没有真正了解弹性盒，所以它显然不起作用：Fiddle

＆＃13;

#container {
  max-width:400px;
  max-height:400px;
}

.hex:before {
    content: " ";
    width: 0; height: 0;
    border-bottom: 30px solid #6C6;
    border-left: 52px solid transparent;
    border-right: 52px solid transparent;
    position: absolute;
    top: -30px;
    flex-shrink: 1;
    flex-grow:1;
    flex-basis: 130px;
}

.hex {
    margin-top: 30px;
    width: 104px;
    height: 60px;
    background-color: #6C6;
    position: relative;
    float:left;
    margin-bottom:30px;
    flex-shrink: 1;
    flex-grow:1;
    flex-basis: 130px;
}

.hex:after {
    content: "";
    width: 0;
    position: absolute;
    bottom: -30px;
    border-top: 30px solid #6C6;
    border-left: 52px solid transparent;
    border-right: 52px solid transparent;
    flex-shrink: 1;
    flex-grow:1;
    flex-basis: 130px;
}

＆＃13;

<div id="container">
  <div class=hex></div>
  <div class=hex></div>
  <div class=hex></div>
  <div class=hex></div>
  <div class=hex></div>
  <div class=hex></div>
  <div class=hex></div>
  <div class=hex></div>
  <div class=hex></div>
  <div class=hex></div>
</div>

＆＃13;

我遇到的问题是：

如何动态缩放这些div，无论数量多少，占用的空间最大。
如何使用纯CSS解决方案来确保所有偶数＆＃34;行＆＃34;被六边形偏移。

!!更新!!

所以我添加了预定行的概念：fiddle我还在寻找一种方法来使行偏移取决于＆＃34; .hex＆＃34;班级宽度。并具有元素数量的十六进制类比例。但我认为网格本身现在看起来非常好。

Answer 1

因此，如果每行需要3个六边形：nth-child可以帮助每2行设置一次余量。

要调整元素的大小，您可以使用百分比，但是您必须使用不带边框的伪，而是使用背景和旋转。

示例：

＆＃13;

#container {
  max-width: 400px;
  max-height: 400px;
  border: solid;padding:1px;
}
/* demo*/
#container:hover {

  max-width: 600px;
  max-height: 600px;
 }/* */
.hex {
  margin-top: 8%;
  width: 28%;
  padding: 8% 0;
  background-color: #6C6;
  position: relative;
  margin-bottom: 3px;
  margin-right: 0px;
  display: inline-flex;
  position: relative;
  align-items: center;
  justify-content: center;
}
.hex:after,
.hex:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0%;
  background: inherit;
  transform: rotate(60deg);
}
.hex:after {
  transform: rotate(-60deg)
}
.hex:nth-child(6n+1) {
  margin-left: 14%;
}

＆＃13;

<div id="container">
  <div class=hex></div>
  <div class=hex></div>
  <div class=hex></div>
  <div class=hex></div>
  <div class=hex></div>
  <div class=hex></div>
  <div class=hex></div>
  <div class=hex></div>
  <div class=hex></div>
  <div class=hex></div>
</div>

＆＃13;

Answer 2

我认为根据行号（偶数/奇数）在Flex容器中应用样式是不可行的。

所以，我已经将六边形重叠设置在同一行，并确保在一行中始终存在偶数个六边形（由于负边距，偶数不具有空间要求，因此它们将永远健康。

这是我的解决方案。将鼠标悬停在容器上以更改宽度。

#container {
  max-width: 410px;
  max-height: 400px;
  display: flex;
  flex-wrap: wrap;
  border: solid 1px green;
  transition: max-width 6s;
}
#container:hover {
  max-width: 800px;
}
.hex {
  margin-top: 30px;
  height: 60px;
  background-color: #6C6;
  position: relative;
  margin-bottom: 90px;
  flex-shrink: 0;
  flex-grow: 0;
  flex-basis: 104px;
}
.hex:nth-child(even) {
  background-color: blue;
  transform: translateY(90px);
  margin-left: -52px;
  margin-right: -52px;
}
.hex:before {
  content: " ";
  width: 0;
  height: 0;
  border-bottom: 30px solid #6c6;
  border-left: 52px solid transparent;
  border-right: 52px solid transparent;
  position: absolute;
  top: -30px;
  flex-shrink: 1;
  flex-grow: 1;
  flex-basis: 130px;
}
.hex:after {
  content: "";
  width: 0;
  position: absolute;
  bottom: -30px;
  border-top: 30px solid #6c6;
  border-left: 52px solid transparent;
  border-right: 52px solid transparent;
  flex-shrink: 1;
  flex-grow: 1;
  flex-basis: 130px;
}
.hex:nth-child(even):before {
  border-bottom-color: blue;
}
.hex:nth-child(even):after {
  border-top-color: blue;
}

<div id="container">
  <div class="hex"></div>
  <div class="hex"></div>
  <div class="hex"></div>
  <div class="hex"></div>
  <div class="hex"></div>
  <div class="hex"></div>
  <div class="hex"></div>
  <div class="hex"></div>
  <div class="hex"></div>
  <div class="hex"></div>
  <div class="hex"></div>
</div>

使用CSS

2 个答案: