html - 我怎样才能画出一个六边形并让所有的 child 都能充分发挥作用？

Question

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

我可以制作一个六边形 div，但我无法将较小的形状放入其中。它们很合身，就像我的六边形是一个矩形一样。

我试过:

<style>
.hexagon {
    overflow: hidden;
    -webkit-transform: rotate(120deg);
       -moz-transform: rotate(120deg);
        -ms-transform: rotate(120deg);
         -o-transform: rotate(120deg);
            transform: rotate(120deg);
    cursor: pointer;
    }
.hexagon-in1 {
    overflow: hidden;
    width: 100%;
    height: 100%;
    -webkit-transform: rotate(-60deg);
       -moz-transform: rotate(-60deg);
        -ms-transform: rotate(-60deg);
         -o-transform: rotate(-60deg);
            transform: rotate(-60deg);
    }
.hexagon1 {
   width: 400px;
   height: 200px;
   margin: 0 0 0 -80px;
}
</style>
<div class="hexagon hexagon1"><div class="hexagon-in1"></div></div>

Answer 1

使用 Sass 的六边形生成器

HTML

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

SASS

// 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 来做这件事。

如果您觉得此答案有帮助，请告诉我。