响应六边形网格 [英] Responsive grid of hexagons

查看：264
本文介绍了响应六边形网格的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我从网上载入我网站上的多张图片。是否可以在响应式网格中为所有这些图片提供六边形？

 < div> ; 
< img src =linkclass =Image> 
< / div> 
 
< div> 
< img src =linkclass =Image> 
< / div> 
 ...

我发现了多种方法，但你需要填写image src 。
这是不可能的，因为我的网站加载从互联网随机图像的jQuery，所以我不能使用背景图片。



我试过这个： a href =http://jsfiddle.net/8f5m5wv0/> http://jsfiddle.net/8f5m5wv0/

解决方案

div>

以下是



此技巧使用：




  • < img>
  • 一个无序列表：每个六边形都包含在< li> 标记和< a& c $ c>标签

  • 将旋转和倾斜变换为六边形

  • overflow：hidden;

  • nth-child（）以常规模式填充六边形



      • 此外，使用< img> 标记创建六角网格。



      六角形网格功能：




    • 每个六边形保持其边界：每个六边形的悬停效果（或点击事件）只在实际形状内触发。

      完整代码



      以下代码段不是最新版本的网格。 GitHub repo 已维护并且是最新的。 



        * { margin：0; padding：0;} body {font-family：'Open Sans'，arial，sans-serif; background：rgb（123，158，158）;}＃hexGrid {overflow：hidden;宽度：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％;高度：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％;右：-100％; width：auto;高度：100％; margin：0 auto;}。hex h1，.hex p {width：90％;填充：0 5％; background-color：＃008080; background-color：rgba（0，128，128，0.8）; font-family：'Raleway'，sans-serif; -webkit-transition：顶部.2s缓出，底部.2s缓出，.2s填充.2s缓出; 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：'';显示：block; position：absolute; bottom：-1px;左：45％;宽度：10％; text-align：center; z-index：1; border-bottom：2px solid #fff;}。hex p {padding-top：50％;顶部：110％; padding-bottom：50％;} / * HOVER EFFECT * /。hexIn：hover h1 {bottom：50％;填充底部：10％;}。 padding-top：10％;} / *空格和大小* / @ media（min-width：1201px）{.hex {width：19.2％ / * =（100-4）/ 5 * /填充底：22.170％。 / * = width / sin（60deg）* /} .hex：第n个子（9n + 6），.hex：第n个子（9n + 7） ：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- 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％;利润率：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 * /填充底：28.001％; / * = width / sin（60deg）* /} .hex：第n个子节点（7n + 5），.hex：第n子节点（7n + 6）顶部：-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：底线：0; } .hex：nth-​​child（7n + 2），.hex：nth-​​child（7n + 6）{margin-left：1％;利润率：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 * /填充底：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％;利润率：1％; } .hex：nth-​​child（5n + 6）{clear：left; }} @ media（max-width：600px）{.hex {width：49.5％; / * =（100-1）/ 2 * /填充底：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 =hexInhref =＃> < img src =https://farm9.staticflickr.com/8461/8048823381_0fbc2d8efb.jpgalt =/> < h1>这是一个标题< / h1> < p>关于此六边形的文章的一些示例文字< / p> < / a> < / li> < li class =hex> < a class =hexInhref =＃> < img src =https://farm5.staticflickr.com/4144/5053682635_b348b24698.jpgalt =/> < h1>这是一个标题< / h1> < p>关于此六边形的文章的一些示例文字< / p> < / a> < / li> < li class =hex> < a class =hexInhref =＃> < img src =https://farm3.staticflickr.com/2827/10384422264_d9c7299146.jpgalt =/> < h1>这是一个标题< / h1> < p>关于此六边形的文章的一些示例文字< / p> < / a> < / li> < li class =hex> < a class =hexInhref =＃> < img src =https://farm7.staticflickr.com/6217/6216951796_e50778255c.jpgalt =/> < h1>这是一个标题< / h1> < p>关于此六边形的文章的一些示例文字< / p> < / a> < / li> < li class =hex> < a class =hexInhref =＃> < img src =https://farm7.staticflickr.com/6083/6055581292_d94c2d90e3.jpgalt =/> < h1>这是一个标题< / h1> < p>关于此六边形的文章的一些示例文字< / p> < / a> < / li> < li class =hex> < a class =hexInhref =＃> < img src =https://farm3.staticflickr.com/2827/10384422264_d9c7299146.jpgalt =/> < h1>这是一个标题< / h1> < p>关于此六边形的文章的一些示例文字< / p> < / a> < / li> < li class =hex> < a class =hexInhref =＃> < img src =https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpgalt =/> < h1>这是一个标题< / h1> < p>关于此六边形的文章的一些示例文字< / p> < / a> < / li> < li class =hex> < a class =hexInhref =＃> < img src =https://farm4.staticflickr.com/3766/12953056854_b8cdf14f21.jpgalt =/> < h1>这是一个标题< / h1> < p>关于此六边形的文章的一些示例文字< / p> < / a> < / li> < li class =hex> < a class =hexInhref =＃> < img src =https://farm7.staticflickr.com/6139/5986939269_10721b8017.jpgalt =/> < h1>这是一个标题< / h1> < p>关于此六边形的文章的一些示例文字< / p> < / a> < / li> < li class =hex> < a class =hexInhref =＃> < img src =https://farm4.staticflickr.com/3165/5733278274_2626612c70.jpgalt =/> < h1>这是一个标题< / h1> < p>关于此六边形的文章的一些示例文字< / p> < / a> < / li> < li class =hex> < a class =hexInhref =＃> < img src =https://farm8.staticflickr.com/7163/6822904141_50277565c3.jpgalt =/> < h1>这是一个标题< / h1> < p>关于此六边形的文章的一些示例文字< / p> < / a> < / li> < li class =hex> < a class =hexInhref =＃> < img src =https://farm4.staticflickr.com/3771/13199704015_72aa535bd7.jpgalt =/> < h1>这是一个标题< / h1> < p>关于此六边形的文章的一些示例文字< / p> < / a> < / li> < li class =hex> < a class =hexInhref =＃> < img src =https://farm7.staticflickr.com/6083/6055581292_d94c2d90e3.jpgalt =/> < h1>这是一个标题< / h1> < p>关于此六边形的文章的一些示例文字< / p> < / a> < / li> < li class =hex> < a class =hexInhref =＃> < img src =https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpgalt =/> < h1>这是一个标题< / h1> < p>关于此六边形的文章的一些示例文字< / p> < / a> < / li> < li class =hex> < a class =hexInhref =＃> < img src =https://farm3.staticflickr.com/2878/10944255073_973d2cd25c.jpgalt =/> < h1>这是一个标题< / h1> < p>关于此六边形的文章的一些示例文字< / p> < / a> < / li> < li class =hex> < a class =hexInhref =＃> < img src =https://farm9.staticflickr.com/8461/8048823381_0fbc2d8efb.jpgalt =/> < h1>这是一个标题< / h1> < p>关于此六边形的文章的一些示例文字< / p> < / a> < / li> < li class =hex> < a class =hexInhref =＃> < img src =https://farm5.staticflickr.com/4144/5053682635_b348b24698.jpgalt =/> < h1>这是一个标题< / h1> < p>关于此六边形的文章的一些示例文字< / p> < / a> < / li> < li class =hex> < a class =hexInhref =＃> < img src =https://farm3.staticflickr.com/2827/10384422264_d9c7299146.jpgalt =/> < h1>这是一个标题< / h1> < p>关于此六边形的文章的一些示例文字< / p> < / a> < / li> < li class =hex> < a class =hexInhref =＃> < img src =https://farm7.staticflickr.com/6217/6216951796_e50778255c.jpgalt =/> < h1>这是一个标题< / h1> < p>关于此六边形的文章的一些示例文字< / p> < / a> < / li> < li class =hex> < a class =hexInhref =＃> < img src =https://farm7.staticflickr.com/6083/6055581292_d94c2d90e3.jpgalt =/> < h1>这是一个标题< / h1> < p>关于此六边形的文章的一些示例文字< / p> < / a> < / li> < li class =hex> < a class =hexInhref =＃> < img src =https://farm3.staticflickr.com/2827/10384422264_d9c7299146.jpgalt =/> < h1>这是一个标题< / h1> < p>关于此六边形的文章的一些示例文字< / p> < / a> < / li> < li class =hex> < a class =hexInhref =＃> < img src =https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpgalt =/> < h1>这是一个标题< / h1> < p>关于此六边形的文章的一些示例文字< / p> < / a> < / li> < li class =hex> < a class =hexInhref =＃> < img src =https://farm4.staticflickr.com/3766/12953056854_b8cdf14f21.jpgalt =/> < h1>这是一个标题< / h1> < p>关于此六边形的文章的一些示例文字< / p> < / a> < / li> < li class =hex> < a class =hexInhref =＃> < img src =https://farm3.staticflickr.com/2878/10944255073_973d2cd25c.jpgalt =/> < h1>这是一个标题< / h1> < p>关于此六边形的文章的一些示例文字< / p> < / a> < / li> < li class =hex> < a class =hexInhref =＃> < img src =https://farm9.staticflickr.com/8461/8048823381_0fbc2d8efb.jpgalt =/> < h1>这是一个标题< / h1> < p>关于此六边形的文章的一些示例文字< / p> < / a> < / li> < li class =hex> < a class =hexInhref =＃> < img src =https://farm5.staticflickr.com/4144/5053682635_b348b24698.jpgalt =/> < h1>这是一个标题< / h1> < p>关于此六边形的文章的一些示例文字< / p> < / a> < / li> < li class =hex> < a class =hexInhref =＃> < img src =https://farm3.staticflickr.com/2827/10384422264_d9c7299146.jpgalt =/> < h1>这是一个标题< / h1> < p>关于此六边形的文章的一些示例文字< / p> < / a> < / li> < li class =hex> < a class =hexInhref =＃> < img src =https://farm7.staticflickr.com/6217/6216951796_e50778255c.jpgalt =/> < h1>这是一个标题< / h1> < p>关于此六边形的文章的一些示例文字< / p> < / a> < / li> < li class =hex> < a class =hexInhref =＃> < img src =https://farm7.staticflickr.com/6083/6055581292_d94c2d90e3.jpgalt =/> < h1>这是一个标题< / h1> < p>关于此六边形的文章的一些示例文字< / p> < / a> < / li> < li class =hex> < a class =hexInhref =＃> < img src =https://farm3.staticflickr.com/2827/10384422264_d9c7299146.jpgalt =/> < h1>这是一个标题< / h1> < p>关于此六边形的文章的一些示例文字< / p> < / a> < / li> < li class =hex> < a class =hexInhref =＃> < img src =https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpgalt =/> < h1>这是一个标题< / h1> < p>关于此六边形的文章的一些示例文字< / p> < / a> < / li> < li class =hex> < a class =hexInhref =＃> < img src =https://farm4.staticflickr.com/3766/12953056854_b8cdf14f21.jpgalt =/> < h1>这是一个标题< / h1> < p>关于此六边形的文章的一些示例文字< / p> < / a> < / li> < li class =hex> < a class =hexInhref =＃> < img src =https://farm7.staticflickr.com/6139/5986939269_10721b8017.jpgalt =/> < h1>这是一个标题< / h1> < p>关于此六边形的文章的一些示例文字< / p> < / a> < / li> < li class =hex> < a class =hexInhref =＃> < img src =https://farm4.staticflickr.com/3165/5733278274_2626612c70.jpgalt =/> < h1>这是一个标题< / h1> < p>关于此六边形的文章的一些示例文字< / p> < / a> < / li> < li class =hex> < a class =hexInhref =＃> < img src =https://farm8.staticflickr.com/7163/6822904141_50277565c3.jpgalt =/> < h1>这是一个标题< / h1> < p>关于此六边形的文章的一些示例文字< / p> < / a> < / li> < li class =hex> < a class =hexInhref =＃> < img src =https://farm4.staticflickr.com/3771/13199704015_72aa535bd7.jpgalt =/> < h1>这是一个标题< / h1> < p>关于此六边形的文章的一些示例文字< / p> < / a> < / li> < li class =hex> < a class =hexInhref =＃> < img src =https://farm7.staticflickr.com/6083/6055581292_d94c2d90e3.jpgalt =/> < h1>这是一个标题< / h1> < p>关于此六边形的文章的一些示例文字< / p> < / a> < / li> < li class =hex> < a class =hexInhref =＃> < img src =https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpgalt =/> < h1>这是一个标题< / h1> < p>关于此六边形的文章的一些示例文字< / p> < / a> < / li> < li class =hex> < a class =hexInhref =＃> < img src =https://farm7.staticflickr.com/6139/5986939269_10721b8017.jpgalt =/> < h1>这是一个标题< / h1> < p>关于此六边形的文章的一些示例文字< / p> < / a> < / li> < li class =hex> < a class =hexInhref =＃> < img src =https://farm4.staticflickr.com/3165/5733278274_2626612c70.jpgalt =/> < h1>这是一个标题< / h1> < p>关于此六边形的文章的一些示例文字< / p> < / a> < / li> < li class =hex> < a class =hexInhref =＃> < img src =https://farm8.staticflickr.com/7163/6822904141_50277565c3.jpgalt =/> < h1>这是一个标题< / h1> < p>关于此六边形的文章的一些示例文字< / p> < / a> < / li> < li class =hex> < a class =hexInhref =＃> < img src =https://farm4.staticflickr.com/3771/13199704015_72aa535bd7.jpgalt =/> < h1>这是一个标题< / h1> < p>关于此六边形的文章的一些示例文字< / p> < / a> < / li> < li class =hex> < a class =hexInhref =＃> < img src =https://farm7.staticflickr.com/6083/6055581292_d94c2d90e3.jpgalt =/> < h1>这是一个标题< / h1> < p>关于此六边形的文章的一些示例文字< / p> < / a> < / li> < li class =hex> < a class =hexInhref =＃> < img src =https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpgalt =/> < h1>这是一个标题< / h1> < p>关于此六边形的文章的一些示例文字< / p> < / a> < / li>< / ul>





      更改每行六边形数量



      网格根据视口自适应每行六边形数量



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



      有关更多自定义，请参阅六边形的大小和间距。





      演示



      有关所有演示的列表，请参阅此代码集集合：响应式六边形网格，每行具有不同数量的六边形，中心选项等...



      这是原始的 codepen演示与 .pusher 元素，使一个不规则网格六边形。 .pusher 元素用于使网格中的空洞具有空六边形。


      I loaded in multiple images on my website from the internet. Is it possible to give all those images an hexagon shape in a responsive grid?

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

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

      I found multiple ways to do this but you needed to fill in the image src in the CSS code. This isnt possible for me cause the website loads in random images from the internet with jQuery so I can't use background images.

      I tried this: http://jsfiddle.net/8f5m5wv0/

      解决方案

      Here is the demo and the repositery for the responsive grid of hexagons. The code here isn't maintained. It was moved to github and improved so comments, issue reporting and contributions should be made there.

      This technique uses :

      • the <img> tag
      • an unordered list : each hexagon is contained in a <li> tag and an <a> tag
      • transform rotate and skew to make the hexagon shapes
      • overflow:hidden;
      • nth-child() to space the hexagons in a regular pattern

      And more to create the hexagon grid with the <img> tag.

      Hexagon grid features :

      • The grid is responsive as it relies on percent widths. The hexagons maintain their aspect ratio with the padding-bottom technique and the images resize to fit the hexagon shape.
      • A hover effect over the hexagons : a text slides in with a transparent overlay over the image.
      • Each hexagon maintains its boundaries : the hover effect (or click event) for each hexagon only triggered inside the actual shape.

      Full code

      The following snippet isn't the latest version of the grid. The GitHub repo is maintained and up to date. Issues and contributions can be made there.

      * {
    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" alt="" />
      <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" alt="" />
      <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" alt="" />
      <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" alt="" />
      <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" alt="" />
      <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" alt="" />
      <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" alt="" />
      <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" alt="" />
      <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" alt="" />
      <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" alt="" />
      <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" alt="" />
      <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" alt="" />
      <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" alt="" />
      <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" alt="" />
      <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" alt="" />
      <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" alt="" />
      <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" alt="" />
      <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" alt="" />
      <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" alt="" />
      <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" alt="" />
      <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" alt="" />
      <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" alt="" />
      <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" alt="" />
      <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" alt="" />
      <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" alt="" />
      <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" alt="" />
      <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" alt="" />
      <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" alt="" />
      <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" alt="" />
      <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" alt="" />
      <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" alt="" />
      <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" alt="" />
      <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" alt="" />
      <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" alt="" />
      <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" alt="" />
      <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" alt="" />
      <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" alt="" />
      <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" alt="" />
      <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" alt="" />
      <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" alt="" />
      <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" alt="" />
      <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" alt="" />
      <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" alt="" />
      <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" alt="" />
      <h1>This is a title</h1>
      <p>Some sample text about the article this hexagon leads to</p>
    </a>
  </li>
</ul>

      Changing the number of hexagons per row

      The grid adapts the number of hexagons per row according to the viewport width from 5 on screens wider than 1200px to 2 on screens narrower than 600px.

      If you don't need the media queries but just want to change the number of hexagons per row, you can keep the CSS from the corresponding media query and remove the unneeded ones.

      For more customization, see sizing and spacing of hexagons.

      Demos

      For a list of all the demos, see this codepen collection: Responsive grids of hexagons with different numbers of hexagons per row, centering options and more...

      Here is the original codepen demo with the .pusher element to make an irregular grid of hexagons. The .pusher element is used to make the "holes" in the grid with empty hexagons.

      这篇关于响应六边形网格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆