HTML/CSS : how to create a hexagonal image-placeholder

Question

This是(几乎)我想要创建的:

HTML

<div class="hexagon1">
  <div class="hexagon-in1">
    <div class="hexagon-in2">
    </div>
  </div>
</div>

CSS

.hexagon1 {
  overflow: hidden;
  visibility: hidden;
  -webkit-transform: rotate(120deg);
  -moz-transform: rotate(120deg);
  -ms-transform: rotate(120deg);
  -o-transform: rotate(120deg);
  transform: rotate(120deg);
  width: 400px;
  height: 200px;
  margin: 0 0 0 -80px;
}

.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);
}

.hexagon-in2 {
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: 50%;
    background-image: url(http://placekitten.com/240/240);
    visibility: visible;
    -webkit-transform: rotate(-60deg);
    -moz-transform: rotate(-60deg);
    -ms-transform: rotate(-60deg);
    -o-transform: rotate(-60deg);
    transform: rotate(-60deg);
}

问题是，我需要在六边形上添加边框，如果可能的话，我想将图片放在 img-tag 中。我尝试在任一 div 上添加边框，但由于 visibility-hidden 或 overflow-hidden 属性，我只在六边形的顶部和底部添加了边框。

这是我到目前为止在谷歌搜索时发现的:

http://csshexagon.com/

https://www.queness.com/post/13901/create-beautiful-hexagon-shapes-with-pure-css3

https://github.com/web-tiki/responsive-grid-of-hexagons

我还在 Stackoverflow 上发现了一些关于这个问题的问题，但他们都没有解释如何精确地创建六边形。此外，示例中的六边形都站在边缘上，这不是我想要的(如代码中所示)。我只需要一个六边形，不需要网格。

当我尝试更改示例的样式时，它总是以灾难性的困惑告终。这就是为什么我想知道如何创建和计算用于创建带边框和内部图片的六边形的 div。

宽度与高度的比例是多少？

如何创建每边宽度相同的边框？

我必须在哪里放置图片作为背景图片？

图片应该有多大(占 div 的百分比)？

创建六边形真正需要哪些变换？ (我看到一个使用缩放、旋转和平移来获取图片的示例)

如何计算旋转？

如何计算所需的 margin ？

由于我是网页设计的新手，有人可以尽可能简单地解释一下吗？如果有人可以根据上面的示例代码向我展示如何计算数字就足够了。我知道六边形的内 Angular 是 120°，仅此而已。

感谢您对预期的帮助。 :)

编辑

我发现的另一页关于六边形的内容，但只是为了创建形状，并没有真正在其中放置图像，也没有在其周围设置边框:

http://jtauber.github.io/articles/css-hexagon.html

Answer 1

我会建议您使用 SVG 方法 来创建这个形状。这真的很容易，而且如果您正在考虑响应式 Web 布局，则可以轻松实现。

Reason for this approach -

<强>1。您不必编写太多的 CSS。

<强>2。内联 SVG 是现代网络方法。

<强>3。可扩展且耐用。<强>4。响应

svg 中的 polygon 标签制作了您想要的形状，使用 css 我们可以定位我们想要实现的目标，例如border 在这种情况下。 Image 已使用 pattern 链接。

Below is the snippet with example of what you need.

svg {
  width: 30%;
  margin: 0 auto;
}

#hex {
  stroke-width: 2;
  stroke: red;
}

<svg viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <pattern id="img" patternUnits="userSpaceOnUse" width="100" height="100">
      <image xlink:href="https://dummyimage.com/600x400/red/fff" x="-25" width="150" height="100" />
    </pattern>
  </defs>
  <polygon id="hex" points="50 1 95 25 95 75 50 99 5 75 5 25" fill="url(#img)"/>
</svg>

<svg viewbox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <defs>
      <pattern id="img" patternUnits="userSpaceOnUse" width="100" height="100">
        <image xlink:href="https://farm4.staticflickr.com/3165/5733278274_2626612c70.jpg" x="-40" width="150" height="100" />
      </pattern>
    </defs>
    <polygon id="hex" points="25 8 75 8 100 50 75 92 25 92 0 50" fill="url(#img)" />
  </svg>