html - 如何绘制六边形并使所有 child 都完全适应？

我需要制作一个在其中包含微型形状的六边形。
像这样：


我可以将六角形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>

最佳答案

使用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进行此操作。

如果您认为此答案有帮助，请告诉我。

关于html - 如何绘制六边形并使所有 child 都完全适应？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46471265/