我怎样才能画出六边形并让所有孩子都尽情享受？

Question

我需要制作一个内部包含迷你形状的六边形。 像这样：

我可以制作一个六边形div但我不能让我的小形状适合它。它们就好像我的六边形是一个矩形。

我试过了：

adapterObj.notifyDataSetChanged()

Answer 1

使用Sass的十六进制形状生成器

HTML

<div class="hex-shape"></div>

SASS（scss）

// need for mathematical calculations
$SQUARE_ROOT_3: 1.73;
$hex-shape-w: 100px;
$hex-shape-h: round($hex-shape-w / $SQUARE_ROOT_3);
$hex-shape-color: red;

.hex-shape {
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  width: $hex-shape-w;
  height: $hex-shape-h;
  background-color: $hex-shape-color;
  margin: ($hex-shape-h / 2) 0;

  &::before,
  &::after {
    position: absolute;
    left: 0;
    content: '';
    display: inline-block;
    border-bottom: $hex-shape-h / 2 solid $hex-shape-color;
    border-right: $hex-shape-w / 2 solid transparent;
    border-left: $hex-shape-w / 2 solid transparent;
  }

  &::before {
    top: -50%;
  }

  &::after {
    bottom: -50%;
    transform: scale(-1);
  }

  &:hover {
    background-color: green;

    &::before,
    &::after {
      border-bottom-color: green;
    }
  }
}

这是形状生成器。

我做了一个笔试验https://codepen.io/stojko/pen/boWOwK?editors=1100

您可以通过更改$ hex-shape-w变量来更改形状大小，如果更大，则必须更改$ hex-container-w变量。

我希望我有更多时间用JavaScript做这件事。

如果您觉得此答案有帮助，请与我们联系。