响应式六边形网格

Posted

技术标签:

【中文标题】响应式六边形网格【英文标题】：Responsive grid of hexagons 【发布时间】：2014-11-24 17:35:00 【问题描述】：

我从互联网上加载了我网站上的多个图像。是否可以在响应式网格中为所有这些图像提供六边形？

<div>
    <img src="link" class="Image">
</div>

<div>
    <img src="link" class="Image">
</div>
...

我找到了多种方法来做到这一点，但您需要在 CSS 代码中填写图片src。 这对我来说是不可能的，因为网站使用 jQuery 从互联网加载随机图像，所以我不能使用背景图像。

我试过这个：http://jsfiddle.net/8f5m5wv0/

【问题讨论】：

是否可以选择使用 SVG？如果允许，那就太容易了。 @GaryHayes 图片来自 Gravatar，他们的文档仅指定支持 .jpg 图片格式。 然后使用六角形面具...完成！ 您对浏览器支持的关心程度如何？仅 Webkit 可以吗？ （Chrome、Safari、android）您需要 Firefox 吗？ IE？ IE8？ webkit 浏览器、firefox、ie8 会很好但不需要——还有移动浏览器 【参考方案1】：

这里是 demo 和 responsive grid of hexagons 的存储库。 此处的代码未维护。它已移至 github 并进行了改进，因此 cmets、问题报告和贡献应提交 there。

这种技术使用：

&lt;img&gt; 标签 一个无序列表：每个六边形都包含在一个&lt;li&gt;标签和一个&lt;a&gt;标签中 变换旋转和倾斜以制作六边形 overflow:hidden; nth-child() 以规则模式间隔六边形

还有更多创建带有&lt;img&gt; 标记的六边形网格。

六边形网格特征：

网格是响应式，因为它依赖于百分比宽度。六边形与 padding-bottom technique 保持其纵横比，并且图像会调整大小以适应六边形形状。 六边形上的悬停效果：文本滑入并在图像上透明覆盖。 每个六边形都保持其边界：每个六边形的悬停效果（或点击事件）仅在实际形状内触发。

完整代码

以下 sn-p 不是网格的最新版本。 GitHub repo 得到维护并且是最新的。可以在那里进行问题和贡献。

* 
    margin: 0;
    padding: 0;


body 
    font-family: 'Open Sans', arial, sans-serif;
    background: rgb(123, 158, 158);


#hexGrid 
    overflow: hidden;
    width: 90%;
    margin: 0 auto;
    padding:0.707% 0;


#hexGrid:after 
    content: "";
    display: block;
    clear: both;


.hex 
    position: relative;
    list-style-type: none;
    float: left;
    overflow: hidden;
    visibility: hidden;
    -webkit-transform: rotate(-60deg) skewY(30deg);
        -ms-transform: rotate(-60deg) skewY(30deg);
            transform: rotate(-60deg) skewY(30deg);


.hex * 
    position: absolute;
    visibility: visible;


.hexIn 
    display:block;
    width: 100%;
    height: 100%;
    text-align: center;
    color: #fff;
    overflow: hidden;
    -webkit-transform: skewY(-30deg) rotate(60deg);
        -ms-transform: skewY(-30deg) rotate(60deg);
            transform: skewY(-30deg) rotate(60deg);
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;



/* HEX CONTENT */

.hex img 
    left: -100%;
    right: -100%;
    width: auto;
    height: 100%;
    margin: 0 auto;


.hex h1, .hex p 
    width: 90%;
    padding: 0 5%;
    background-color: #008080;
    background-color: rgba(0, 128, 128, 0.8);
    font-family: 'Raleway', sans-serif;
    -webkit-transition: top .2s ease-out, bottom .2s ease-out, .2s padding .2s ease-out;
            transition: top .2s ease-out, bottom .2s ease-out, .2s padding .2s ease-out;


.hex h1 
    bottom: 110%;
    font-style: italic;
    font-weight: normal;
    font-size: 1.5em;
    padding-top: 100%;
    padding-bottom: 100%;


.hex h1:after 
    content: '';
    display: block;
    position: absolute;
    bottom: -1px;
    left: 45%;
    width: 10%;
    text-align: center;
    z-index: 1;
    border-bottom: 2px solid #fff;


.hex p 
    padding-top: 50%;
    top: 110%;
    padding-bottom: 50%;



/* HOVER EFFECT  */

.hexIn:hover h1 
    bottom: 50%;
    padding-bottom: 10%;


.hexIn:hover p 
    top: 50%;
    padding-top: 10%;


/* SPACING AND SIZING */

@media (min-width:1201px) 
    .hex 
        width: 19.2%; /* = (100-4) / 5 */
        padding-bottom: 22.170%; /* =  width / sin(60deg) */
    
    .hex:nth-child(9n+6),
    .hex:nth-child(9n+7),
    .hex:nth-child(9n+8),
    .hex:nth-child(9n+9) 
        margin-top: -4.676%;
        margin-bottom: -4.676%;
        -webkit-transform: translateX(50%) rotate(-60deg) skewY(30deg);
            -ms-transform: translateX(50%) rotate(-60deg) skewY(30deg);
                transform: translateX(50%) rotate(-60deg) skewY(30deg);
    
    .hex:nth-child(9n+6):last-child,
    .hex:nth-child(9n+7):last-child,
    .hex:nth-child(9n+8):last-child,
    .hex:nth-child(9n+9):last-child 
        margin-bottom: 0;
    
    .hex:nth-child(9n+6) 
        margin-left: 0.5%;
        clear: left;
    
    .hex:nth-child(9n+10) 
        clear: left;
    
    .hex:nth-child(9n+2),
    .hex:nth-child(9n+ 7) 
        margin-left: 1%;
        margin-right: 1%;
    
    .hex:nth-child(9n+3),
    .hex:nth-child(9n+4),
    .hex:nth-child(9n+8) 
        margin-right: 1%;
    


@media (max-width: 1200px) and (min-width:901px) 
    .hex 
        width: 24.25%; /* = (100-3) / 4 */
        padding-bottom: 28.001%; /* =  width / sin(60deg) */
    
    .hex:nth-child(7n+5),
    .hex:nth-child(7n+6),
    .hex:nth-child(7n+7) 
        margin-top: -6.134%;
        margin-bottom: -6.134%;
        -webkit-transform: translateX(50%) rotate(-60deg) skewY(30deg);
            -ms-transform: translateX(50%) rotate(-60deg) skewY(30deg);
                transform: translateX(50%) rotate(-60deg) skewY(30deg);
    
    .hex:nth-child(7n+5):last-child,
    .hex:nth-child(7n+6):last-child,
    .hex:nth-child(7n+7):last-child 
        margin-bottom: 0;
    
    .hex:nth-child(7n+2),
    .hex:nth-child(7n+6) 
        margin-left: 1%;
        margin-right: 1%;
    
    .hex:nth-child(7n+3) 
        margin-right: 1%;
    
    .hex:nth-child(7n+8) 
        clear: left;
    
    .hex:nth-child(7n+5) 
        clear: left;
        margin-left: 0.5%;
    


@media (max-width: 900px) and (min-width:601px) 
    .hex 
        width: 32.666%; /* = (100-2) / 3 */
        padding-bottom: 37.720%; /* =  width / sin(60) */
    
    .hex:nth-child(5n+4),
    .hex:nth-child(5n+5) 
        margin-top: -8.564%;
        margin-bottom: -8.564%;
        -webkit-transform: translateX(50%) rotate(-60deg) skewY(30deg);
            -ms-transform: translateX(50%) rotate(-60deg) skewY(30deg);
                transform: translateX(50%) rotate(-60deg) skewY(30deg);
    
    .hex:nth-child(5n+4):last-child,
    .hex:nth-child(5n+5):last-child 
        margin-bottom: 0;
    
    .hex:nth-child(5n+4) 
        margin-right: 1%;
        margin-left: 0.5%;
    
    .hex:nth-child(5n+2) 
        margin-left: 1%;
        margin-right: 1%;
    
    .hex:nth-child(5n+6) 
        clear: left;
    


@media (max-width: 600px) 
    .hex 
        width: 49.5%; /* = (100-1) / 2 */
        padding-bottom: 57.158%; /* =  width / sin(60) */
    
    .hex:nth-child(3n+3) 
        margin-top: -13.423%;
        margin-bottom: -13.423%;
        -webkit-transform: translateX(50%) rotate(-60deg) skewY(30deg);
            -ms-transform: translateX(50%) rotate(-60deg) skewY(30deg);
                transform: translateX(50%) rotate(-60deg) skewY(30deg);
    
    .hex:nth-child(3n+3):last-child 
        margin-bottom: 0;
    
    .hex:nth-child(3n+3) 
        margin-left: 0.5%;
    
    .hex:nth-child(3n+2) 
        margin-left: 1%;
    
    .hex:nth-child(3n+4) 
        clear: left;
    

<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,800italic,400,700,800' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Raleway:400,700,300,200,100,900' rel='stylesheet' type='text/css'>

<ul id="hexGrid">
  <li class="hex">
    <a class="hexIn" href="#">
      <img src="https://farm9.staticflickr.com/8461/8048823381_0fbc2d8efb.jpg"  />
      <h1>This is a title</h1>
      <p>Some sample text about the article this hexagon leads to</p>
    </a>
  </li>
  <li class="hex">
    <a class="hexIn" href="#">
      <img src="https://farm5.staticflickr.com/4144/5053682635_b348b24698.jpg"  />
      <h1>This is a title</h1>
      <p>Some sample text about the article this hexagon leads to</p>
    </a>
  </li>
  <li class="hex">
    <a class="hexIn" href="#">
      <img src="https://farm3.staticflickr.com/2827/10384422264_d9c7299146.jpg"  />
      <h1>This is a title</h1>
      <p>Some sample text about the article this hexagon leads to</p>
    </a>
  </li>
  <li class="hex">
    <a class="hexIn" href="#">
      <img src="https://farm7.staticflickr.com/6217/6216951796_e50778255c.jpg"  />
      <h1>This is a title</h1>
      <p>Some sample text about the article this hexagon leads to</p>
    </a>
  </li>
  <li class="hex">
    <a class="hexIn" href="#">
      <img src="https://farm7.staticflickr.com/6083/6055581292_d94c2d90e3.jpg"  />
      <h1>This is a title</h1>
      <p>Some sample text about the article this hexagon leads to</p>
    </a>
  </li>
  <li class="hex">
    <a class="hexIn" href="#">
      <img src="https://farm3.staticflickr.com/2827/10384422264_d9c7299146.jpg"  />
      <h1>This is a title</h1>
      <p>Some sample text about the article this hexagon leads to</p>
    </a>
  </li>
  <li class="hex">
    <a class="hexIn" href="#">
      <img src="https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg"  />
      <h1>This is a title</h1>
      <p>Some sample text about the article this hexagon leads to</p>
    </a>
  </li>
  <li class="hex">
    <a class="hexIn" href="#">
      <img src="https://farm4.staticflickr.com/3766/12953056854_b8cdf14f21.jpg"  />
      <h1>This is a title</h1>
      <p>Some sample text about the article this hexagon leads to</p>
    </a>
  </li>
  <li class="hex">
    <a class="hexIn" href="#">
      <img src="https://farm7.staticflickr.com/6139/5986939269_10721b8017.jpg"  />
      <h1>This is a title</h1>
      <p>Some sample text about the article this hexagon leads to</p>
    </a>
  </li>
  <li class="hex">
    <a class="hexIn" href="#">
      <img src="https://farm4.staticflickr.com/3165/5733278274_2626612c70.jpg"  />
      <h1>This is a title</h1>
      <p>Some sample text about the article this hexagon leads to</p>
    </a>
  </li>
  <li class="hex">
    <a class="hexIn" href="#">
      <img src="https://farm8.staticflickr.com/7163/6822904141_50277565c3.jpg"  />
      <h1>This is a title</h1>
      <p>Some sample text about the article this hexagon leads to</p>
    </a>
  </li>
  <li class="hex">
    <a class="hexIn" href="#">
      <img src="https://farm4.staticflickr.com/3771/13199704015_72aa535bd7.jpg"  />
      <h1>This is a title</h1>
      <p>Some sample text about the article this hexagon leads to</p>
    </a>
  </li>
  <li class="hex">
    <a class="hexIn" href="#">
      <img src="https://farm7.staticflickr.com/6083/6055581292_d94c2d90e3.jpg"  />
      <h1>This is a title</h1>
      <p>Some sample text about the article this hexagon leads to</p>
    </a>
  </li>
  <li class="hex">
    <a class="hexIn" href="#">
      <img src="https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg"  />
      <h1>This is a title</h1>
      <p>Some sample text about the article this hexagon leads to</p>
    </a>
  </li>
  <li class="hex">
    <a class="hexIn" href="#">
      <img src="https://farm3.staticflickr.com/2878/10944255073_973d2cd25c.jpg"  />
      <h1>This is a title</h1>
      <p>Some sample text about the article this hexagon leads to</p>
    </a>
  </li>
  <li class="hex">
    <a class="hexIn" href="#">
      <img src="https://farm9.staticflickr.com/8461/8048823381_0fbc2d8efb.jpg"  />
      <h1>This is a title</h1>
      <p>Some sample text about the article this hexagon leads to</p>
    </a>
  </li>
  <li class="hex">
    <a class="hexIn" href="#">
      <img src="https://farm5.staticflickr.com/4144/5053682635_b348b24698.jpg"  />
      <h1>This is a title</h1>
      <p>Some sample text about the article this hexagon leads to</p>
    </a>
  </li>
  <li class="hex">
    <a class="hexIn" href="#">
      <img src="https://farm3.staticflickr.com/2827/10384422264_d9c7299146.jpg"  />
      <h1>This is a title</h1>
      <p>Some sample text about the article this hexagon leads to</p>
    </a>
  </li>
  <li class="hex">
    <a class="hexIn" href="#">
      <img src="https://farm7.staticflickr.com/6217/6216951796_e50778255c.jpg"  />
      <h1>This is a title</h1>
      <p>Some sample text about the article this hexagon leads to</p>
    </a>
  </li>
  <li class="hex">
    <a class="hexIn" href="#">
      <img src="https://farm7.staticflickr.com/6083/6055581292_d94c2d90e3.jpg"  />
      <h1>This is a title</h1>
      <p>Some sample text about the article this hexagon leads to</p>
    </a>
  </li>
  <li class="hex">
    <a class="hexIn" href="#">
      <img src="https://farm3.staticflickr.com/2827/10384422264_d9c7299146.jpg"  />
      <h1>This is a title</h1>
      <p>Some sample text about the article this hexagon leads to</p>
    </a>
  </li>
  <li class="hex">
    <a class="hexIn" href="#">
      <img src="https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg"  />
      <h1>This is a title</h1>
      <p>Some sample text about the article this hexagon leads to</p>
    </a>
  </li>
  <li class="hex">
    <a class="hexIn" href="#">
      <img src="https://farm4.staticflickr.com/3766/12953056854_b8cdf14f21.jpg"  />
      <h1>This is a title</h1>
      <p>Some sample text about the article this hexagon leads to</p>
    </a>
  </li>
  <li class="hex">
    <a class="hexIn" href="#">
      <img src="https://farm3.staticflickr.com/2878/10944255073_973d2cd25c.jpg"  />
      <h1>This is a title</h1>
      <p>Some sample text about the article this hexagon leads to</p>
    </a>
  </li>
  <li class="hex">
    <a class="hexIn" href="#">
      <img src="https://farm9.staticflickr.com/8461/8048823381_0fbc2d8efb.jpg"  />
      <h1>This is a title</h1>
      <p>Some sample text about the article this hexagon leads to</p>
    </a>
  </li>
  <li class="hex">
    <a class="hexIn" href="#">
      <img src="https://farm5.staticflickr.com/4144/5053682635_b348b24698.jpg"  />
      <h1>This is a title</h1>
      <p>Some sample text about the article this hexagon leads to</p>
    </a>
  </li>
  <li class="hex">
    <a class="hexIn" href="#">
      <img src="https://farm3.staticflickr.com/2827/10384422264_d9c7299146.jpg"  />
      <h1>This is a title</h1>
      <p>Some sample text about the article this hexagon leads to</p>
    </a>
  </li>
  <li class="hex">
    <a class="hexIn" href="#">
      <img src="https://farm7.staticflickr.com/6217/6216951796_e50778255c.jpg"  />
      <h1>This is a title</h1>
      <p>Some sample text about the article this hexagon leads to</p>
    </a>
  </li>
  <li class="hex">
    <a class="hexIn" href="#">
      <img src="https://farm7.staticflickr.com/6083/6055581292_d94c2d90e3.jpg"  />
      <h1>This is a title</h1>
      <p>Some sample text about the article this hexagon leads to</p>
    </a>
  </li>
  <li class="hex">
    <a class="hexIn" href="#">
      <img src="https://farm3.staticflickr.com/2827/10384422264_d9c7299146.jpg"  />
      <h1>This is a title</h1>
      <p>Some sample text about the article this hexagon leads to</p>
    </a>
  </li>
  <li class="hex">
    <a class="hexIn" href="#">
      <img src="https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg"  />
      <h1>This is a title</h1>
      <p>Some sample text about the article this hexagon leads to</p>
    </a>
  </li>
  <li class="hex">
    <a class="hexIn" href="#">
      <img src="https://farm4.staticflickr.com/3766/12953056854_b8cdf14f21.jpg"  />
      <h1>This is a title</h1>
      <p>Some sample text about the article this hexagon leads to</p>
    </a>
  </li>
  <li class="hex">
    <a class="hexIn" href="#">
      <img src="https://farm7.staticflickr.com/6139/5986939269_10721b8017.jpg"  />
      <h1>This is a title</h1>
      <p>Some sample text about the article this hexagon leads to</p>
    </a>
  </li>
  <li class="hex">
    <a class="hexIn" href="#">
      <img src="https://farm4.staticflickr.com/3165/5733278274_2626612c70.jpg"  />
      <h1>This is a title</h1>
      <p>Some sample text about the article this hexagon leads to</p>
    </a>
  </li>
  <li class="hex">
    <a class="hexIn" href="#">
      <img src="https://farm8.staticflickr.com/7163/6822904141_50277565c3.jpg"  />
      <h1>This is a title</h1>
      <p>Some sample text about the article this hexagon leads to</p>
    </a>
  </li>
  <li class="hex">
    <a class="hexIn" href="#">
      <img src="https://farm4.staticflickr.com/3771/13199704015_72aa535bd7.jpg"  />
      <h1>This is a title</h1>
      <p>Some sample text about the article this hexagon leads to</p>
    </a>
  </li>
  <li class="hex">
    <a class="hexIn" href="#">
      <img src="https://farm7.staticflickr.com/6083/6055581292_d94c2d90e3.jpg"  />
      <h1>This is a title</h1>
      <p>Some sample text about the article this hexagon leads to</p>
    </a>
  </li>
  <li class="hex">
    <a class="hexIn" href="#">
      <img src="https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg"  />
      <h1>This is a title</h1>
      <p>Some sample text about the article this hexagon leads to</p>
    </a>
  </li>
  <li class="hex">
    <a class="hexIn" href="#">
      <img src="https://farm7.staticflickr.com/6139/5986939269_10721b8017.jpg"  />
      <h1>This is a title</h1>
      <p>Some sample text about the article this hexagon leads to</p>
    </a>
  </li>
  <li class="hex">
    <a class="hexIn" href="#">
      <img src="https://farm4.staticflickr.com/3165/5733278274_2626612c70.jpg"  />
      <h1>This is a title</h1>
      <p>Some sample text about the article this hexagon leads to</p>
    </a>
  </li>
  <li class="hex">
    <a class="hexIn" href="#">
      <img src="https://farm8.staticflickr.com/7163/6822904141_50277565c3.jpg"  />
      <h1>This is a title</h1>
      <p>Some sample text about the article this hexagon leads to</p>
    </a>
  </li>
  <li class="hex">
    <a class="hexIn" href="#">
      <img src="https://farm4.staticflickr.com/3771/13199704015_72aa535bd7.jpg"  />
      <h1>This is a title</h1>
      <p>Some sample text about the article this hexagon leads to</p>
    </a>
  </li>
  <li class="hex">
    <a class="hexIn" href="#">
      <img src="https://farm7.staticflickr.com/6083/6055581292_d94c2d90e3.jpg"  />
      <h1>This is a title</h1>
      <p>Some sample text about the article this hexagon leads to</p>
    </a>
  </li>
  <li class="hex">
    <a class="hexIn" href="#">
      <img src="https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg"  />
      <h1>This is a title</h1>
      <p>Some sample text about the article this hexagon leads to</p>
    </a>
  </li>
</ul>

更改每行六边形的数量

网格根据视口宽度调整每行的六边形数量，从宽于 1200 像素的屏幕上的 5 到窄于 600 像素的屏幕上的 2。

如果您不需要媒体查询但只想更改每行的六边形数量，您可以保留相应媒体查询的 CSS 并删除不需要的。

如需更多自定义，请参阅sizing and spacing of hexagons。

演示

有关所有演示的列表，请参阅此 codepen 集合：Responsive grids of hexagons，每行具有不同数量的六边形、居中选项等等...

这是原始的codepen demo 和.pusher 元素，用于制作不规则的六边形网格。 .pusher 元素用于在网格中制作带有空六边形的“孔”。

【讨论】：

这太棒了，很棒的工作 web-tiki！我很惊讶没有更多的 cmets 这么说。我面临的一个小问题是将十六进制图像居中。由于推动器的工作方式，整个部分略微偏离中心。我解决这个问题的方法是添加一个包装器 div 并在右侧填充：.hex-wrapper max-width: 600px; padding-right: 80px; margin-left: auto; margin-right: auto; 我还需要它更小一点，但在移动设备上不需要，因此最大宽度为 600。有人想过吗？ 这太棒了……你真是个有才华的设计师 @web-tiki 你能解释一下如何选择偶数线六边形的 margin-top 和 margin-bottom 的值吗？ @red 是 x in this image 的长度减去您实际看到的六边形之间的垂直边距。 @red 我现在没有时间解释，但我会尽快写点东西。完成后我会 ping 你。【参考方案2】：

好的，这是一个干净的、跨浏览器兼容的解决方案，甚至可以让您对六边形进行蜂窝：

为此，您需要将每个图像包装在 2 个容器中，因为一个将用于左上角/右下角截止，另一个用于右上角/左下角截止。

<div class="outerclip">
    <div class="innerclip">
        <img src="http://img1.wikia.nocookie.net/__cb20090714124528/firefly/images/thumb/1/11/Firefly_class_ship.jpg/100px-136,568,0,431-Firefly_class_ship.jpg" />
    </div>
</div>

然后，CSS 会为每个截断容器提供一个 skew，以将角度添加到图像：

.outerclip 
    -webkit-transform: skew(-30deg);
    -ms-transform: skew(-30deg);
    -transform: skew(-30deg);
    overflow: hidden;
    display: inline-block;

.innerclip 
    -webkit-transform: skew(50deg);
    -ms-transform: skew(50deg);
    transform: skew(50deg);
    overflow: hidden;
    display: inline-block;

img 
    -webkit-transform: skew(-30deg);
    -ms-transform: skew(-30deg);
    transform: skew(-30deg);

演示：http://jsfiddle.net/XkQtF/3/

注意：为了提高渲染质量，我建议将.outerclip 和.innerclip 设置为相同的固定高度。

要获得蜂窝，您可以将多个图像放入 row 容器中，然后将每个奇数行偏移几个像素，如下所示：

演示：http://jsfiddle.net/XkQtF/4/

【讨论】：

【参考方案3】：

如果是关于蜂窝， 这是一个 CSS 可能性。 http://codepen.io/gc-nomade/pen/eyntg/

  <div><!-- even div gets a negative bottom margin. all of them gets a negative right margin -->
  <span><!-- skewed and rotated -->
    <img src="http://lorempixel.com/200/200/food/1"/><!-- rotated back, unskewed and rescaled -->
  </span>
</div>

【讨论】：

【参考方案4】：

您可以在% + 伪元素中使用vertical-padding 来绘制一个正方形开始。

然后，使用第二个元素绘制蒙版。

DEMO

html

        <div class="hex">
          <img src="image100x120">
        </div>

CSS

<!--language:css-->

.hex  
  position:relative;
  margin:auto;
  text-align:center;
  overflow:hidden;
  white-space:nowrap;
  display:table;

.hex:before 
  content:'';
  padding-top:120%;
  display:inline-block;
  vertical-align:middle;


.hex:after 
  content:'';
  position:absolute;
  top:0%;
  left:-10%;
  width:120%;
  padding-top:120%;
  transform: rotatex(45deg) rotate(45deg);
  text-align:center;
  box-shadow:0 0 0 200px white;;

.hex img 
  display:inline-block;
  vertical-align:middle;
  margin:0 -10px;

【讨论】：

干得好，但这不是六边形，而是八边形:) 您的解决方案虽然是一个不错的概念，但不幸的是不支持蜂窝多个图像。 @S.B.好的，所以你一定在寻找这样的东西。 codepen.io/gc-nomade/pen/eyntg 灵感来自 codepen.io/gc-nomade/pen/KzimD 所以它确实支持蜂蜜的东西:)【参考方案5】：

Demo

HTML：

<div class="hexagon">
  <div class="contents"></div>
</div>

SASS（带指南针）：

$width: 400px;
$fillColor: #CCC;
$height: $width*sin(60deg);
.hexagon 
  display: inline-block;
  position: relative;
  width: $width;

.hexagon:before, .hexagon:after 
  content: '';
  display: block;
  width: 50%;
  border: 0 solid transparent;

.hexagon:before 
  border-bottom-color: $fillColor;
  border-width: 0 $width/4 $height/2;

.hexagon:after 
  border-top-color: $fillColor;
  border-width: $height/2 $width/4 0;

.hexagon > .contents 
  position: absolute;
  top: 0; bottom: 0;
  left: 25%; right: 25%;

然后，如果你想在六边形中放置一个图像，在.contents 中使用

<img id="myimg" src="foo" />

例如，这样设置样式：

#myimg 
  position: absolute;
  top: 0; bottom: 0;
  left: 0; right: 0; 
  margin: auto;
  width: 50%;

【讨论】：

我想我对如何实现图像感到困惑......？ @rdnydnns 你可以使用position:absolute。我更新了答案以显示它。【参考方案6】：

您可以创建具有透明六边形形状的图像并将其叠加在注入的图像上。

HTML：

<div class="hexagon">
    <!-- get the image -->
    <img src="injected.jpg" />

    <!-- apply hexagon shape to it -->
    <img src="transparentHex.png" />    
</div>

CSS：

.hexagon 
    position: relative;


.hexagon > img 
    position: absolute;

演示： http://jsfiddle.net/dr6Hp/3/

【讨论】：

在涉及多张图片时不能解决蜂窝问题。 Ups，抱歉错过了蜂窝部分。在这种情况下，最好不要发明***并尝试其中一个 jQuery 插件，例如jqueryscript.net/layout/…?【参考方案7】：

查看这个用 AngularJS 实现的响应式六边形网格。

HTML

<div class="wrapper">

  <section class="hex-grid">

    <div
      ng-repeat="item in app.items"
      class="grid-item repeat-animation">

      <div class="inner">
        <div
          class="inner-inner"
          ng-style=" 'background-image': 'url( item.imgSrc )' ">

          <a
            href=""
            class="grid-info">

            <div class ="inner-text">
              <div class="inner-text-inner">

                <h2> item.name </h2>
                <p>item.desc </p>

              </div><!-- /.inner-text-inner -->
            </div><!-- /.inner-text -->
          </a><!-- /.grid-info -->
        </div><!-- /.inner-inner -->
      </div><!-- /.inner -->
    </div><!-- /.grid-item -->
  </section><!-- /.hex-grid -->

</div><!-- /.wrapper -->

CSS：六边形网格

.hex-grid 
  position: relative;
  width: 80%;
  left: 10%;
  padding-top: 120px;

@media (max-width: 767px) 
  .hex-grid 
    width: 100%;
    left: 0;
  

.hex-grid .grid-item 
  position: relative;
  display: inline-block;
  float: left;
  overflow: hidden;
  visibility: hidden;
  -webkit-transform: rotate(120deg);
  -ms-transform: rotate(120deg);
  transform: rotate(120deg);
  cursor: pointer;

@media (max-width: 633px) 
  .hex-grid .grid-item 
    width: 222%;
    margin: 0 -61%;
    margin-bottom: 10px;
  

@media (min-width: 634px) and (max-width: 1022px) 
  .hex-grid .grid-item 
    width: 133%;
    margin: 0 -42%;
    margin-bottom: -25%;
  
  .hex-grid .grid-item:nth-child(2),
  .hex-grid .grid-item:nth-child(4),
  .hex-grid .grid-item:nth-child(6),
  .hex-grid .grid-item:nth-child(8),
  .hex-grid .grid-item:nth-child(10),
  .hex-grid .grid-item:nth-child(12),
  .hex-grid .grid-item:nth-child(14),
  .hex-grid .grid-item:nth-child(16),
  .hex-grid .grid-item:nth-child(18),
  .hex-grid .grid-item:nth-child(20),
  .hex-grid .grid-item:nth-child(22),
  .hex-grid .grid-item:nth-child(24),
  .hex-grid .grid-item:nth-child(26),
  .hex-grid .grid-item:nth-child(28),
  .hex-grid .grid-item:nth-child(30) 
    margin-top: 28%;
  
  .hex-grid .grid-item:nth-child(3),
  .hex-grid .grid-item:nth-child(5),
  .hex-grid .grid-item:nth-child(7),
  .hex-grid .grid-item:nth-child(9),
  .hex-grid .grid-item:nth-child(11),
  .hex-grid .grid-item:nth-child(13),
  .hex-grid .grid-item:nth-child(15),
  .hex-grid .grid-item:nth-child(17),
  .hex-grid .grid-item:nth-child(19),
  .hex-grid .grid-item:nth-child(21),
  .hex-grid .grid-item:nth-child(23),
  .hex-grid .grid-item:nth-child(25),
  .hex-grid .grid-item:nth-child(27),
  .hex-grid .grid-item:nth-child(29) 
    clear: left;
  

@media (min-width: 1023px) and (max-width: 1599px) 
  .hex-grid .grid-item 
    width: 91.6%;
    margin: 0 -29.2%;
    margin-bottom: -17.5%;
  
  .hex-grid .grid-item:nth-child(2),
  .hex-grid .grid-item:nth-child(5),
  .hex-grid .grid-item:nth-child(8),
  .hex-grid .grid-item:nth-child(11),
  .hex-grid .grid-item:nth-child(14),
  .hex-grid .grid-item:nth-child(17),
  .hex-grid .grid-item:nth-child(20),
  .hex-grid .grid-item:nth-child(23),
  .hex-grid .grid-item:nth-child(26),
  .hex-grid .grid-item:nth-child(29) 
    margin-top: 19%;
  
  .hex-grid .grid-item:nth-child(4),
  .hex-grid .grid-item:nth-child(7),
  .hex-grid .grid-item:nth-child(10),
  .hex-grid .grid-item:nth-child(13),
  .hex-grid .grid-item:nth-child(16),
  .hex-grid .grid-item:nth-child(19),
  .hex-grid .grid-item:nth-child(22),
  .hex-grid .grid-item:nth-child(25),
  .hex-grid .grid-item:nth-child(28) 
    clear: left;
  

@media (min-width: 1600px) 
  .hex-grid .grid-item 
    width: 66.7%;
    margin: 0 -20.9%;
    margin-bottom: -12.5%;
  
  .hex-grid .grid-item:nth-child(2),
  .hex-grid .grid-item:nth-child(4),
  .hex-grid .grid-item:nth-child(6),
  .hex-grid .grid-item:nth-child(8),
  .hex-grid .grid-item:nth-child(10),
  .hex-grid .grid-item:nth-child(12),
  .hex-grid .grid-item:nth-child(14),
  .hex-grid .grid-item:nth-child(16),
  .hex-grid .grid-item:nth-child(18),
  .hex-grid .grid-item:nth-child(20),
  .hex-grid .grid-item:nth-child(22),
  .hex-grid .grid-item:nth-child(24),
  .hex-grid .grid-item:nth-child(26),
  .hex-grid .grid-item:nth-child(28),
  .hex-grid .grid-item:nth-child(30) 
    margin-top: 14%;
  
  .hex-grid .grid-item:nth-child(5),
  .hex-grid .grid-item:nth-child(9),
  .hex-grid .grid-item:nth-child(13),
  .hex-grid .grid-item:nth-child(17),
  .hex-grid .grid-item:nth-child(21),
  .hex-grid .grid-item:nth-child(25),
  .hex-grid .grid-item:nth-child(29) 
    clear: left;
  

.hex-grid .grid-item .inner 
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 100%;
  -webkit-transform: rotate(-60deg);
  -ms-transform: rotate(-60deg);
  transform: rotate(-60deg);

.hex-grid .grid-item .inner .inner-inner 
  -webkit-transform-style: preserve-3d;
  /* Chrome, Safari, Opera */
  transform-style: preserve-3d;
  visibility: visible;
  overflow: hidden;
  width: 100%;
  padding-bottom: 40%;
  -webkit-transform: rotate(-60deg);
  -ms-transform: rotate(-60deg);
  transform: rotate(-60deg);
  background-repeat: no-repeat;
  background-size: 50%;
  -webkit-transition: all 0.35s ease-out;
  transition: all 0.35s ease-out;
  background-position: 50%;

@media (min-width: 1100px) 
  .hex-grid .grid-item .inner .inner-inner 
    padding-bottom: 40%;
  

.hex-grid .grid-item .inner .inner-inner:hover 
  background-size: 60%;

.hex-grid .grid-item .inner .inner-inner .grid-info 
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  padding: 10%;
  background: #ffffff;
  color: #000000;
  text-decoration: none;
  text-align: center;
  z-index: 2;
  opacity: 0;
  filter: alpha(opacity=0);
  -webkit-transition: all 0.35s;
  transition: all 0.35s;

.hex-grid .grid-item .inner .inner-inner .grid-info:hover 
  opacity: 1;
  filter: alpha(opacity=100);

.hex-grid .grid-item .inner .inner-inner .grid-info .inner-text 
  display: table;
  position: relative;
  height: 100%;
  width: 46%;
  left: 27%;

.hex-grid .grid-item .inner .inner-inner .grid-info .inner-text .inner-text-inner 
  display: table-cell;
  vertical-align: middle;

.hex-grid .grid-item .inner .inner-inner 
  -webkit-backface-visibility: hidden;

CSS：动画

.repeat-animation.ng-enter-stagger,
.repeat-animation.ng-leave-stagger,
.repeat-animation.ng-move-stagger 
  /* 100ms will be applied between each sucessive enter operation */
     -moz-transition-delay: 0.1s !important;
  -webkit-transition-delay: 0.1s !important;
          transition-delay: 0.1s !important;

  /* this is here to avoid accidental CSS inheritance */
  -webkit-transition-duration: 0 !important;
          transition-duration: 0 !important;


.repeat-animation.ng-enter,
.repeat-animation.ng-leave,
.repeat-animation.ng-move 
     -moz-transition: 0.2s ease-in-out all;
  -webkit-transition: 0.2s ease-in-out all;
          transition: 0.2s ease-in-out all;


.repeat-animation.ng-leave.ng-leave-active,
.repeat-animation.ng-enter,
.repeat-animation.ng-move 
     -moz-transition: 0.2s ease-in-out all;
  -webkit-transition: 0.2s ease-in-out all;
          transition: 0.2s ease-in-out all;

  opacity:0;


.repeat-animation.ng-leave,
.repeat-animation.ng-move.ng-move-active,
.repeat-animation.ng-enter.ng-enter-active 
  opacity:1;

AngularJS

'use strict';
(function() 
  /**
   * Declares the app module.
   */
  angular
    .module( 'app', [ 'ngAnimate' ] );

//...

原文：http://rachidmrad.com/

所有功劳归于Mr. Rachid Mrad，他是一位了不起的网页设计师。

https://github.com/mnishiguchi/hexagonal_grid

【讨论】：

虽然此链接可能会回答问题，但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改，仅链接答案可能会失效。 - From Review 感谢您的反馈！我发布了代码的基本部分。【参考方案8】：

不要在 img 标签中使用 class，而是在容器 img 中使用 css 

.container img your code

它会省去你在图片中放置类的很多麻烦

【讨论】：

Eh...这种方法的一个问题是，如果您在任何时候都希望该容器中的图像没有应用了样式。 如果您想要其他形状也只需更改此代码并为图像创建一个类六边形 .container img.hexagon 您的代码【参考方案9】：

试试这个小提琴

http://jsfiddle.net/ku860uoh/

<div class="hex one">
       <div class="images1">
          <div class="images2"></div>
       </div>
    </div>

    <div class="hex two">
       <div class="images1">
          <div class="images2"></div>
       </div>
    </div>

CSS

BODY 
    background: url(http://placekitten.com/600/600);

.hex 
    overflow: hidden;
    visibility: hidden;
    -webkit-transform: rotate(120deg);
    -moz-transform: rotate(120deg);
    -ms-transform: rotate(120deg);
    -o-transform: rotate(120deg);
    transform: rotate(120deg);
    cursor: pointer;
    
.images1
    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);
    
.images2
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: 50%;
    background-image: url(http://placekitten.com/238/240);
    visibility: visible;
    -webkit-transform: rotate(-60deg);
       -moz-transform: rotate(-60deg);
        -ms-transform: rotate(-60deg);
         -o-transform: rotate(-60deg);
            transform: rotate(-60deg);
    
.images2:hover 
    background-image: url(http://placekitten.com/440/242);
    

.one 
    width: 400px;
    height: 200px;
    margin: 0 0 0 -80px;
    
.two 
    width: 200px;
    height: 400px;
    margin: -80px 0 0 20px;

【讨论】：

【参考方案10】：

纯 CSS 响应式六边形网格。它依赖clip-path 来创建主要形状，并依赖shape-outside 来确保我们有正确的缩进：

.main 
  display:flex;
  --s: 100px;  /* size  */
  --m: 4px;    /* space */


.container 
  font-size: 0; /*disable white space between inline block element */


.container div 
  width: var(--s);
  margin: var(--m);
  height: calc(var(--s)*1.1547); /*  = 1/cos(30)  */
  display: inline-block;
  font-size:initial;
  clip-path: polygon(0% 25%, 0% 75%, 50% 100%, 100% 75%, 100% 25%, 50% 0%);
  background: red;
  margin-bottom: calc(var(--m) + var(--s)*-0.2885); /* = tan(30)/2 */

.container div:nth-child(odd) 
  background:green;

.container::before 
  content: "";
  width: calc(var(--s)/2 + var(--m));
  float: left;
  height: 100%;
  --r:calc(var(--s)*3*1.1547/2 + 4*var(--m)  - 2px);
  shape-outside: 
   repeating-linear-gradient(     
     transparent 0 calc(var(--r) - 3px),      
     #fff        0 var(--r));

<div class="main">
  <div class="container">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

相关获取更多详情：responsive hexagon grid without media query

【讨论】：

以上是关于响应式六边形网格的主要内容，如果未能解决你的问题，请参考以下文章

如何制作响应式倾斜多边形 div？

响应式网页设计网格系统实现

响应式网格（网格模板列）

如何从 Bootstrap 3 中获取响应式网格？

如何用一简单的CSS制作响应式HTML网页

创建响应式布局的10款优秀网格工具集锦