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 标签内。我尝试在任一 div 上添加边框，但由于可见性隐藏或溢出隐藏属性，我只在六边形的顶部和底部添加了边框。

这是我迄今为止在谷歌搜索时发现的:

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 approach创建这个形状。这真的很容易，而且如果您正在考虑响应式网页布局，也可以轻松实现。

Reason for this approach -

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

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

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

polygon标签 svg使用 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>