带阴影的响应式六边形网格

Question

我已经看到许多关于响应式六边形网格的可用资源，但其中 none 解决了我的问题。到目前为止我发现的所有网格的形状如下

但我希望六边形具有以下形状：

我已经尝试并取得了预期的结果，但问题是无法通过响应式布局实现。而且我还无法应用阴影。我该怎么做？

li.hex-row {
  margin-top: -100px;
}
li.hex-row:nth-child(2n) .hexagon {
  transform: translateX(50%) rotate(120deg);
}
ul#hexagonContainer {
  margin: 0;
  list-style: none;
  padding: 0;
  margin-top: 100px;
}
.hexagon {
  width: 400px;
  background: transparent;
  height: 200px;
  display: inline-block;
  transform: rotate(120deg);
  overflow: hidden;
  visibility: hidden;
  margin-bottom: 10px;
}
li.hex-row {
  white-space: nowrap;
}
.hexagon .hex-inner {
  width: 100%;
  height: 100%;
  background: rebeccapurple;
  transform: rotate(-60deg);
  overflow: hidden;
}
.hexagon .hex-img {
  width: 100%;
  height: 100%;
  transform: rotate(-60deg);
  visibility: visible;
  box-shadow: 1px 0px 0px 0px;
  background-color: #310073;
}
.hexagon .hex-img:after {
  position: absolute;
  width: 100%;
  content: '';
  z-index: 1;
  height: 100%;
  background-image: url(http://www.w3schools.com/cssref/img_flwr.gif);
  background-position: center center;
  background-repeat: no-repeat;
}
.hex-img.hide {
  visibility: hidden;
}

<div id="container">
  <ul id="hexagonContainer">
    <!-- First row. -->
    <li class="hex-row">
      <div class="hexagon">
        <div class="hex-inner">
          <div class="hex-img hide">

          </div>
        </div>
      </div>
      <div class="hexagon">
        <div class="hex-inner">
          <div class="hex-img hide">

          </div>
        </div>
      </div>
      <div class="hexagon">
        <div class="hex-inner">
          <div class="hex-img hide">

          </div>
        </div>
      </div>
      <div class="hexagon">
        <div class="hex-inner">
          <div class="hex-img hide">

          </div>
        </div>
      </div>
      <div class="hexagon">
        <div class="hex-inner">
          <div class="hex-img body-care">

          </div>
        </div>
      </div>
    </li>
    <!-- Second row. -->
    <li class="hex-row">
      <div class="hexagon">
        <div class="hex-inner">
          <div class="hex-img hide">

          </div>
        </div>
      </div>
      <div class="hexagon">
        <div class="hex-inner">
          <div class="hex-img hide">

          </div>
        </div>
      </div>
      <div class="hexagon">
        <div class="hex-inner">
          <div class="hex-img hide">

          </div>
        </div>
      </div>
      <div class="hexagon">
        <div class="hex-inner">
          <div class="hex-img">

          </div>
        </div>
      </div>
      <div class="hexagon">
        <div class="hex-inner">
          <div class="hex-img">

          </div>
        </div>
      </div>
    </li>
    <!-- Third row. -->
    <li class="hex-row">
      <div class="hexagon">
        <div class="hex-inner">
          <div class="hex-img hide">

          </div>
        </div>
      </div>
      <div class="hexagon">
        <div class="hex-inner">
          <div class="hex-img hide">

          </div>
        </div>
      </div>
      <div class="hexagon">
        <div class="hex-inner">
          <div class="hex-img hide">

          </div>
        </div>
      </div>
      <div class="hexagon">
        <div class="hex-inner">
          <div class="hex-img">

          </div>
        </div>
      </div>
      <div class="hexagon">
        <div class="hex-inner">
          <div class="hex-img">

          </div>
        </div>
      </div>
    </li>
    <!-- Fourth row. -->
    <li class="hex-row">
      <div class="hexagon">
        <div class="hex-inner">
          <div class="hex-img hide">

          </div>
        </div>
      </div>
      <div class="hexagon">
        <div class="hex-inner">
          <div class="hex-img">

          </div>
        </div>
      </div>
      <div class="hexagon">
        <div class="hex-inner">
          <div class="hex-img">

          </div>
        </div>
      </div>
      <div class="hexagon">
        <div class="hex-inner">
          <div class="hex-img">

          </div>
        </div>
      </div>
      <div class="hexagon">
        <div class="hex-inner">
          <div class="hex-img hide">

          </div>
        </div>
      </div>
    </li>
    <!-- Fifth row. -->
    <li class="hex-row">
      <div class="hexagon">
        <div class="hex-inner">
          <div class="hex-img hide">

          </div>
        </div>
      </div>
      <div class="hexagon">
        <div class="hex-inner">
          <div class="hex-img">

          </div>
        </div>
      </div>
      <div class="hexagon">
        <div class="hex-inner">
          <div class="hex-img">

          </div>
        </div>
      </div>
      <div class="hexagon">
        <div class="hex-inner">
          <div class="hex-img">

          </div>
        </div>
      </div>
      <div class="hexagon">
        <div class="hex-inner">
          <div class="hex-img">

          </div>
        </div>
      </div>
    </li>
    <!-- Sixth row. -->
    <li class="hex-row">
      <div class="hexagon">
        <div class="hex-inner">
          <div class="hex-img hide">

          </div>
        </div>
      </div>
      <div class="hexagon">
        <div class="hex-inner">
          <div class="hex-img">

          </div>
        </div>
      </div>
      <div class="hexagon">
        <div class="hex-inner">
          <div class="hex-img">

          </div>
        </div>
      </div>
      <div class="hexagon">
        <div class="hex-inner">
          <div class="hex-img">

          </div>
        </div>
      </div>
      <div class="hexagon">
        <div class="hex-inner">
          <div class="hex-img hide">

          </div>
        </div>
      </div>
    </li>
    <!-- Seventh row. -->
    <li class="hex-row">
      <div class="hexagon">
        <div class="hex-inner">
          <div class="hex-img hide">

          </div>
        </div>
      </div>
      <div class="hexagon">
        <div class="hex-inner">
          <div class="hex-img hide">

          </div>
        </div>
      </div>
      <div class="hexagon">
        <div class="hex-inner">
          <div class="hex-img">

          </div>
        </div>
      </div>
      <div class="hexagon">
        <div class="hex-inner">
          <div class="hex-img">

          </div>
        </div>
      </div>
      <div class="hexagon">
        <div class="hex-inner">
          <div class="hex-img hide">

          </div>
        </div>
      </div>
    </li>
  </ul>
</div>

Answer 1

您只需将尺寸更改为 vw 即可使其响应。

关于阴影，在现代浏览器中可以用过滤器来完成drop-shadow:

li.hex-row {
  margin-top: -10vw;
}
li.hex-row:nth-child(2n) .hexagon {
  transform: translateX(50%) rotate(120deg);
}
ul#hexagonContainer {
  margin: 0;
  list-style: none;
  padding: 0;
  margin-top: 10vw;
}
.hexagon {
  width: 18vw;
  background: transparent;
  height: 9vw;
  display: inline-block;
  transform: rotate(120deg);
  overflow: hidden;
  visibility: hidden;
  margin-bottom: 7vw;
  position: relative;
}
li.hex-row {
  white-space: nowrap;
  filter: drop-shadow(0.5vw 2vw 0.5vw black);
}
.hexagon .hex-inner {
  width: 100%;
  height: 100%;
  background: rebeccapurple;
  transform: rotate(-60deg);
  overflow: hidden;
  position: relative;
}
.hexagon .hex-img {
  width: 100%;
  height: 100%;
  transform: rotate(-60deg);
  visibility: visible;
  box-shadow: 1px 0px 0px 0px;
  background-color: #310073;
}
.hexagon .hex-img:after {
  position: absolute;
  width: 100%;
  content: '';
  z-index: 1;
  height: 100%;
  background-image: url(http://www.w3schools.com/cssref/img_flwr.gif);
  background-position: center center;
  background-repeat: no-repeat;
}
.hex-img.hide {
  visibility: hidden; 
}

<div id="container">
  <ul id="hexagonContainer">
    <!-- First row. -->
    <li class="hex-row">
      <div class="hexagon">
        <div class="hex-inner">
          <div class="hex-img hide">

          </div>
        </div>
      </div>
      <div class="hexagon">
        <div class="hex-inner">
          <div class="hex-img hide">

          </div>
        </div>
      </div>
      <div class="hexagon">
        <div class="hex-inner">
          <div class="hex-img hide">

          </div>
        </div>
      </div>
      <div class="hexagon">
        <div class="hex-inner">
          <div class="hex-img hide">

          </div>
        </div>
      </div>
      <div class="hexagon">
        <div class="hex-inner">
          <div class="hex-img body-care">

          </div>
        </div>
      </div>
    </li>
    <!-- Second row. -->
    <li class="hex-row">
      <div class="hexagon">
        <div class="hex-inner">
          <div class="hex-img hide">

          </div>
        </div>
      </div>
      <div class="hexagon">
        <div class="hex-inner">
          <div class="hex-img hide">

          </div>
        </div>
      </div>
      <div class="hexagon">
        <div class="hex-inner">
          <div class="hex-img hide">

          </div>
        </div>
      </div>
      <div class="hexagon">
        <div class="hex-inner">
          <div class="hex-img">

          </div>
        </div>
      </div>
      <div class="hexagon">
        <div class="hex-inner">
          <div class="hex-img">

          </div>
        </div>
      </div>
    </li>
    <!-- Third row. -->
    <li class="hex-row">
      <div class="hexagon">
        <div class="hex-inner">
          <div class="hex-img hide">

          </div>
        </div>
      </div>
      <div class="hexagon">
        <div class="hex-inner">
          <div class="hex-img hide">

          </div>
        </div>
      </div>
      <div class="hexagon">
        <div class="hex-inner">
          <div class="hex-img hide">

          </div>
        </div>
      </div>
      <div class="hexagon">
        <div class="hex-inner">
          <div class="hex-img">

          </div>
        </div>
      </div>
      <div class="hexagon">
        <div class="hex-inner">
          <div class="hex-img">

          </div>
        </div>
      </div>
    </li>
    <!-- Fourth row. -->
    <li class="hex-row">
      <div class="hexagon">
        <div class="hex-inner">
          <div class="hex-img hide">

          </div>
        </div>
      </div>
      <div class="hexagon">
        <div class="hex-inner">
          <div class="hex-img">

          </div>
        </div>
      </div>
      <div class="hexagon">
        <div class="hex-inner">
          <div class="hex-img">

          </div>
        </div>
      </div>
      <div class="hexagon">
        <div class="hex-inner">
          <div class="hex-img">

          </div>
        </div>
      </div>
      <div class="hexagon">
        <div class="hex-inner">
          <div class="hex-img hide">

          </div>
        </div>
      </div>
    </li>
    <!-- Fifth row. -->
    <li class="hex-row">
      <div class="hexagon">
        <div class="hex-inner">
          <div class="hex-img hide">

          </div>
        </div>
      </div>
      <div class="hexagon">
        <div class="hex-inner">
          <div class="hex-img">

          </div>
        </div>
      </div>
      <div class="hexagon">
        <div class="hex-inner">
          <div class="hex-img">

          </div>
        </div>
      </div>
      <div class="hexagon">
        <div class="hex-inner">
          <div class="hex-img">

          </div>
        </div>
      </div>
      <div class="hexagon">
        <div class="hex-inner">
          <div class="hex-img">

          </div>
        </div>
      </div>
    </li>
    <!-- Sixth row. -->
    <li class="hex-row">
      <div class="hexagon">
        <div class="hex-inner">
          <div class="hex-img hide">

          </div>
        </div>
      </div>
      <div class="hexagon">
        <div class="hex-inner">
          <div class="hex-img">

          </div>
        </div>
      </div>
      <div class="hexagon">
        <div class="hex-inner">
          <div class="hex-img">

          </div>
        </div>
      </div>
      <div class="hexagon">
        <div class="hex-inner">
          <div class="hex-img">

          </div>
        </div>
      </div>
      <div class="hexagon">
        <div class="hex-inner">
          <div class="hex-img hide">

          </div>
        </div>
      </div>
    </li>
    <!-- Seventh row. -->
    <li class="hex-row">
      <div class="hexagon">
        <div class="hex-inner">
          <div class="hex-img hide">

          </div>
        </div>
      </div>
      <div class="hexagon">
        <div class="hex-inner">
          <div class="hex-img hide">

          </div>
        </div>
      </div>
      <div class="hexagon">
        <div class="hex-inner">
          <div class="hex-img">

          </div>
        </div>
      </div>
      <div class="hexagon">
        <div class="hex-inner">
          <div class="hex-img">

          </div>
        </div>
      </div>
      <div class="hexagon">
        <div class="hex-inner">
          <div class="hex-img hide">

          </div>
        </div>
      </div>
    </li>
  </ul>
</div>

带阴影的响应式六边形网格

Responsive Hexagon Grid with shadow

css

css-shapes