如何在自定义布局中连接CSS六边形元素？

Question

这是我希望实现的布局：

我用这个css创建了六边形：

.hexagon {
  width: 100px;
  height: 55px;
  background: red;
  position: relative;
  display:inline-block;
  margin:0.2em;
}
.hexagon:before {
    content: "";
    position: absolute;
    top: -25px;
    left: 0;
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 25px solid red;
}
.hexagon:after {
    content: "";
    position: absolute;
    bottom: -25px;
    left: 0;
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 25px solid red;
}

然而，我想知道如何用图像填充它们。这是一支钢笔：https://codepen.io/1istbesser/pen/ddypXK

如何将图像放入六边形中以使其覆盖所有六边形？如果我在#h六边形1上使用背景图像，图像仅覆盖中间部分。

Answer 1

您可以做的是绘制一个SVG并将图像作为掩码放入css中

https://codepen.io/noahblon/post/coloring-svgs-in-css-background-images

*{
  background-color:black;
}
section{
  margin-top:3em;
  display:flex;
  flex-flow: column;
  align-items: center;
}
.hexagon {
	width: 100px;
	height: 110px;
	background: red;
	position: relative;
  display:inline-block;
  margin:0.2em;
  -webkit-mask:url(https://svgshare.com/i/5Fk.svg) no-repeat 50% 50%;
  mask:url(https://svgshare.com/i/5Fk.svg) no-repeat 50% 50%;
  background-image: url('https://img1.ibxk.com.br/2017/07/13/13160112901226.jpg?w=700');
  background-size: cover;
  background-position: center;
}
.row{
  text-align: center;
  margin-top: -25px
}

<section>
      <div class="row">
      <div class="hexagon" id="hexagon1"></div>
      <div class="hexagon" id="hexagon2"></div>
      <div class="hexagon" id="hexagon3"></div>
      <div class="hexagon" id="hexagon4"></div>
      <div class="row">
      <div class="hexagon" id="hexagon5"></div>
      <div class="hexagon" id="hexagon6"></div>
      <div class="hexagon" id="hexagon7"></div>
      </div>
      <div class="row">
      <div class="hexagon" id="hexagon8"></div>
      <div class="hexagon" id="hexagon9"></div>
      </div>
 </section>

Answer 2

如果您想使用图像作为背景，您需要考虑另一种方式。您依赖伪元素，因此您的六边形不是一个元素，因此您无法使用背景图像覆盖整个区域。

这是一个使用clip-path的想法：

* {
  background-color: black;
}

section {
  margin-top: 3em;
  display: flex;
  flex-flow: column;
  align-items: center;
}

.hexagon {
  width: 100px;
  height: 100px;
  background: url(https://lorempixel.com/100/100/) 0 0/cover no-repeat;
  position: relative;
  display: inline-block;
  margin: -10px 0.2em;
  -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

<section>
  <div class="row">
    <div class="hexagon" id="hexagon1"></div>
    <div class="hexagon" id="hexagon2"></div>
    <div class="hexagon" id="hexagon3"></div>
    <div class="hexagon" id="hexagon4"></div>
  </div>
  <div class="row">
    <div class="hexagon" id="hexagon5"></div>
    <div class="hexagon" id="hexagon6"></div>
    <div class="hexagon" id="hexagon7"></div>
    <div class="hexagon" id="hexagon8"></div>
    <div class="hexagon" id="hexagon9"></div>
  </div>

</section>

Answer 3

您将遇到的问题是，使用CSS三角形创建六边形实际上会产生填充了一两个边框（其余为透明）的方形框。这有两个影响：

1. 您无法轻松地将图像放入填充的边框中，以便对其进行剪裁

您将需要可以生成实际六边形的东西。带有剪辑路径的内联SVG非常适合——与CSS中的剪辑路径不同，它几乎在SVG所在的任何地方都受支持。这是一个例子：

<svg class="svg-graphic" width="300" height="300" viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" version="1.1">
    <defs>
       <clipPath id="hexagonal-mask">
          <polygon points="300,150 225,280 75,280 0,150 75,20 225,20" />
       </clipPath>
    </defs> 
    <image clip-path="url(#hexagonal-mask)" height="100%" width="100%" xlink:href="https://i.imgur.com/grp9BU1.png" preserveAspectRatio="xMidYMin slice"/>
</svg>