响应六角形网格与阴影

Question

我已经看到许多关于响应式六边形网格的可用资源，但这些都没有解决我的问题。到目前为止我找到的所有网格都具有以下形状

但我希望六角形有这样的形状：

我已经尝试过并且已经达到了预期的效果，但问题是无法通过响应式布局实现。而且我还没有能够应用阴影。我怎么能这样做？

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

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

关于阴影，在现代浏览器中，它可以通过过滤器阴影实现：

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>