logo标签列表

具有阴影的响应式六边形网格

csscss-shapes
3

我看到了很多关于响应式六边形网格的资源，但是没有一个能解决我的问题。到目前为止，我找到的所有网格都具有以下形状。

This is I found in many article or tutorial

但我想让这个六边形有这个形状：

This shape I want in gride

我已经尝试并且取得了期望的结果，但问题是不能通过响应式布局实现。而且我也无法应用阴影。如何做到这一点？

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>

1个回答
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>

非常感谢您的回复，但说实话，在您的回复之前我已经实现了这个结果，但是我使用了％测量来表示十六进制颜色，并且没有使用CSS背景图像，而是在.hex-img div中放置了img元素。 - user5553308
高兴它（以某种方式）有所帮助。当设置为百分比时，六边形的高度没有引起问题吗？ - vals
你可以在这个链接中查看：usdigitalpunch.com/xfit/hexagon.html。 - user5553308
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接