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

查看：34 发布时间：2021/12/1 16:44:34 html css responsive-design css-shapes

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

问题描述

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


<img src="link" class="图片">
<div><img src="link" class="图片">

...

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

我试过这个:

这种技术使用:

标签
无序列表:每个六边形都包含在一个
标签和一个和图像调整大小以适应六边形.
六边形上的悬停效果:文字滑入图像，并在图像上覆盖透明.
每个六边形都保持其边界:每个六边形的悬停效果(或点击事件)仅在实际形状内部触发.

`完整代码`

以下代码段不是网格的最新版本.GitHub 存储库得到维护和更新.可以在那里提出问题和贡献.

* {边距:0；填充:0；}身体 {font-family: 'Open Sans', arial, sans-serif;背景:RGB(123、158、158)；}#hexGrid {溢出:隐藏；宽度:90%；边距:0 自动；填充:0.707% 0;}#hexGrid:后{内容: "";显示:块；清楚:两者；}.hex {位置:相对；列表样式类型:无；向左飘浮;溢出:隐藏；可见性:隐藏；-webkit-transform: 旋转 (-60deg) skewY(30deg);-ms-transform: 旋转 (-60deg) skewY(30deg);变换:旋转(-60度)skewY(30度)；}.hex * {位置:绝对；可见性:可见；}.hexIn {显示:块；宽度:100%；高度:100%；文本对齐:居中；颜色:#fff;溢出:隐藏；-webkit-transform: skewY(-30deg) 旋转(60deg);-ms-transform: skewY(-30deg) 旋转(60deg);变换:倾斜(-30度)旋转(60度)；-webkit-backface-visibility:隐藏；背面可见性:隐藏；}/* 十六进制内容 */.hex 图像 {左:-100%；右:-100%；宽度:自动；高度:100%；边距:0 自动；}.hex h1, .hex p {宽度:90%；填充:0 5%；背景色:#008080；背景颜色:rgba(0, 128, 128, 0.8);font-family: 'Raleway', sans-serif;-webkit-transition:顶部 .2s 缓出，底部 .2s 缓出，.2s 填充 .2s 缓出；过渡:顶部 .2s 缓出，底部 .2s 缓出，.2s 填充 .2s 缓出；}.hex h1 {底部:110%；字体样式:斜体；字体粗细:正常；字体大小:1.5em；填充顶部:100%；填充底部:100%；}.hex h1:后{内容: '';显示:块；位置:绝对；底部:-1px；左:45%；宽度:10%；文本对齐:居中；z-索引:1；边框底部:2px 实心 #fff;}.hex p {填充顶部:50%；顶部:110%；填充底部:50%；}/* 悬停效果 */.hexIn:悬停 h1 {底部:50%；填充底部:10%；}.hexIn:悬停 p {顶部:50%；填充顶部:10%；}/* 间距和大小 */@media(最小宽度:1201px){.hex {宽度:19.2%；/* = (100-4)/5 */填充底部:22.170%；/* = 宽度/罪(60度)*/}.hex:nth-child(9n+6),.hex:nth-child(9n+7),.hex:nth-child(9n+8),.hex:nth-child(9n+9) {保证金最高:-4.676%；保证金底部:-4.676%；-webkit-transform: translateX(50%)rotate(-60deg)skewY(30deg);-ms-transform: translateX(50%)rotate(-60deg)skewY(30deg);变换: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 {底边距:0；}.hex:nth-child(9n+6) {左边距:0.5%；清除:左；}.hex:nth-child(9n+10) {清除:左；}.hex:nth-child(9n+2),.hex:nth-child(9n+7) {左边距:1%；右边距:1%；}.hex:nth-child(9n+3),.hex:nth-child(9n+4),.hex:nth-child(9n+8) {右边距:1%；}}@media (max-width: 1200px) 和 (min-width:901px) {.hex {宽度:24.25%；/* = (100-3)/4 */填充底部:28.001%；/* = 宽度/罪(60度)*/}.hex:nth-child(7n+5),.hex:nth-child(7n+6),.hex:nth-child(7n+7) {保证金最高:-6.134%；保证金底部:-6.134%；-webkit-transform: translateX(50%)rotate(-60deg)skewY(30deg);-ms-transform: translateX(50%)rotate(-60deg)skewY(30deg);变换: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 {底边距:0；}.hex:nth-child(7n+2),.hex:nth-child(7n+6) {左边距:1%；右边距:1%；}.hex:nth-child(7n+3) {右边距:1%；}.hex:nth-child(7n+8) {清除:左；}.hex:nth-child(7n+5) {清除:左；左边距:0.5%；}}@media (max-width: 900px) 和 (min-width:601px) {.hex {宽度:32.666%；/* = (100-2)/3 */填充底部:37.720%；/* = 宽度/罪 (60) */}.hex:nth-child(5n+4),.hex:nth-child(5n+5) {保证金最高:-8.564%；保证金底部:-8.564%；-webkit-transform: translateX(50%)rotate(-60deg)skewY(30deg);-ms-transform: translateX(50%)rotate(-60deg)skewY(30deg);变换:translateX(50%)rotate(-60deg)skewY(30deg)；}.hex:nth-child(5n+4):last-child,.hex:nth-child(5n+5):last-child {底边距:0；}.hex:nth-child(5n+4) {右边距:1%；左边距:0.5%；}.hex:nth-child(5n+2) {左边距:1%；右边距:1%；}.hex:nth-child(5n+6) {清除:左；}}@media(最大宽度:600px){.hex {宽度:49.5%；/* = (100-1)/2 */填充底部:57.158%；/* = 宽度/罪 (60) */}.hex:nth-child(3n+3) {保证金最高:-13.423%；保证金底部:-13.423%；-webkit-transform: translateX(50%)rotate(-60deg)skewY(30deg);-ms-transform: translateX(50%)rotate(-60deg)skewY(30deg);变换:translateX(50%)rotate(-60deg)skewY(30deg)；}.hex:nth-child(3n+3):last-child {底边距:0；}.hex:nth-child(3n+3) {左边距:0.5%；}.hex:nth-child(3n+2) {左边距:1%；}.hex:nth-child(3n+4) {清除:左；}}

<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"><a class="hexIn" href="#"><img src="https://farm9.staticflickr.com/8461/8048823381_0fbc2d8efb.jpg" alt=""/><h1>这是一个标题</h1><p>关于这个六边形指向的文章的一些示例文本</p></a>
<a class="hexIn" href="#"><img src="https://farm5.staticflickr.com/4144/5053682635_b348b24698.jpg" alt=""/><h1>这是一个标题</h1><p>关于这个六边形指向的文章的一些示例文本</p></a>
<a class="hexIn" href="#"><img src="https://farm3.staticflickr.com/2827/10384422264_d9c7299146.jpg" alt=""/><h1>这是一个标题</h1><p>关于这个六边形指向的文章的一些示例文本</p></a>
<a class="hexIn" href="#"><img src="https://farm7.staticflickr.com/6217/6216951796_e50778255c.jpg" alt=""/><h1>这是一个标题</h1><p>关于这个六边形指向的文章的一些示例文本</p></a>
<a class="hexIn" href="#"><img src="https://farm7.staticflickr.com/6083/6055581292_d94c2d90e3.jpg" alt=""/><h1>这是一个标题</h1><p>关于这个六边形指向的文章的一些示例文本</p></a>
<a class="hexIn" href="#"><img src="https://farm3.staticflickr.com/2827/10384422264_d9c7299146.jpg" alt=""/><h1>这是一个标题</h1><p>关于这个六边形指向的文章的一些示例文本</p></a>
<a class="hexIn" href="#"><img src="https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg" alt=""/><h1>这是一个标题</h1><p>关于这个六边形指向的文章的一些示例文本</p></a>
<a class="hexIn" href="#"><img src="https://farm4.staticflickr.com/3766/12953056854_b8cdf14f21.jpg" alt=""/><h1>这是一个标题</h1><p>关于这个六边形指向的文章的一些示例文本</p></a>
<a class="hexIn" href="#"><img src="https://farm7.staticflickr.com/6139/5986939269_10721b8017.jpg" alt=""/><h1>这是一个标题</h1><p>关于这个六边形指向的文章的一些示例文本</p></a>
<a class="hexIn" href="#"><img src="https://farm4.staticflickr.com/3165/5733278274_2626612c70.jpg" alt=""/><h1>这是一个标题</h1><p>关于这个六边形指向的文章的一些示例文本</p></a>
<a class="hexIn" href="#"><img src="https://farm8.staticflickr.com/7163/6822904141_50277565c3.jpg" alt=""/><h1>这是一个标题</h1><p>关于这个六边形指向的文章的一些示例文本</p></a>
<a class="hexIn" href="#"><img src="https://farm4.staticflickr.com/3771/13199704015_72aa535bd7.jpg" alt=""/><h1>这是一个标题</h1><p>关于这个六边形指向的文章的一些示例文本</p></a>
<a class="hexIn" href="#"><img src="https://farm7.staticflickr.com/6083/6055581292_d94c2d90e3.jpg" alt=""/><h1>这是一个标题</h1><p>关于这个六边形指向的文章的一些示例文本</p></a>
<a class="hexIn" href="#"><img src="https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg" alt=""/><h1>这是一个标题</h1><p>关于这个六边形指向的文章的一些示例文本</p></a>
<a class="hexIn" href="#"><img src="https://farm3.staticflickr.com/2878/10944255073_973d2cd25c.jpg" alt=""/><h1>这是一个标题</h1><p>关于这个六边形指向的文章的一些示例文本</p></a>
<a class="hexIn" href="#"><img src="https://farm9.staticflickr.com/8461/8048823381_0fbc2d8efb.jpg" alt=""/><h1>这是一个标题</h1><p>关于这个六边形指向的文章的一些示例文本</p></a>
<a class="hexIn" href="#"><img src="https://farm5.staticflickr.com/4144/5053682635_b348b24698.jpg" alt=""/><h1>这是一个标题</h1><p>关于这个六边形指向的文章的一些示例文本</p></a>
<a class="hexIn" href="#"><img src="https://farm3.staticflickr.com/2827/10384422264_d9c7299146.jpg" alt=""/><h1>这是一个标题</h1><p>关于这个六边形指向的文章的一些示例文本</p></a>
<a class="hexIn" href="#"><img src="https://farm7.staticflickr.com/6217/6216951796_e50778255c.jpg" alt=""/><h1>这是一个标题</h1><p>关于这个六边形指向的文章的一些示例文本</p></a>
<a class="hexIn" href="#"><img src="https://farm7.staticflickr.com/6083/6055581292_d94c2d90e3.jpg" alt=""/><h1>这是一个标题</h1><p>关于这个六边形指向的文章的一些示例文本</p></a>
<a class="hexIn" href="#"><img src="https://farm3.staticflickr.com/2827/10384422264_d9c7299146.jpg" alt=""/><h1>这是一个标题</h1><p>关于这个六边形指向的文章的一些示例文本</p></a>
<a class="hexIn" href="#"><img src="https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg" alt=""/><h1>这是一个标题</h1><p>关于这个六边形指向的文章的一些示例文本</p></a>
<a class="hexIn" href="#"><img src="https://farm4.staticflickr.com/3766/12953056854_b8cdf14f21.jpg" alt=""/><h1>这是一个标题</h1><p>关于这个六边形指向的文章的一些示例文本</p></a>
<a class="hexIn" href="#"><img src="https://farm3.staticflickr.com/2878/10944255073_973d2cd25c.jpg" alt=""/><h1>这是一个标题</h1><p>关于这个六边形指向的文章的一些示例文本</p></a>
<a class="hexIn" href="#"><img src="https://farm9.staticflickr.com/8461/8048823381_0fbc2d8efb.jpg" alt=""/><h1>这是一个标题</h1><p>关于这个六边形指向的文章的一些示例文本</p></a>
<a class="hexIn" href="#"><img src="https://farm5.staticflickr.com/4144/5053682635_b348b24698.jpg" alt=""/><h1>这是一个标题</h1><p>关于这个六边形指向的文章的一些示例文本</p></a>
<a class="hexIn" href="#"><img src="https://farm3.staticflickr.com/2827/10384422264_d9c7299146.jpg" alt=""/><h1>这是一个标题</h1><p>关于这个六边形指向的文章的一些示例文本</p></a>
<a class="hexIn" href="#"><img src="https://farm7.staticflickr.com/6217/6216951796_e50778255c.jpg" alt=""/><h1>这是一个标题</h1><p>关于这个六边形指向的文章的一些示例文本</p></a>
<a class="hexIn" href="#"><img src="https://farm7.staticflickr.com/6083/6055581292_d94c2d90e3.jpg" alt=""/><h1>这是一个标题</h1><p>关于这个六边形指向的文章的一些示例文本</p></a>
<a class="hexIn" href="#"><img src="https://farm3.staticflickr.com/2827/10384422264_d9c7299146.jpg" alt=""/><h1>这是一个标题</h1><p>关于这个六边形指向的文章的一些示例文本</p></a>
<a class="hexIn" href="#"><img src="https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg" alt=""/><h1>这是一个标题</h1><p>关于这个六边形指向的文章的一些示例文本</p></a>
<a class="hexIn" href="#"><img src="https://farm4.staticflickr.com/3766/12953056854_b8cdf14f21.jpg" alt=""/><h1>这是一个标题</h1><p>关于这个六边形指向的文章的一些示例文本</p></a>
<a class="hexIn" href="#"><img src="https://farm7.staticflickr.com/6139/5986939269_10721b8017.jpg" alt=""/><h1>这是一个标题</h1><p>关于这个六边形指向的文章的一些示例文本</p></a>
<a class="hexIn" href="#"><img src="https://farm4.staticflickr.com/3165/5733278274_2626612c70.jpg" alt=""/><h1>这是一个标题</h1><p>关于这个六边形指向的文章的一些示例文本</p></a>
<a class="hexIn" href="#"><img src="https://farm8.staticflickr.com/7163/6822904141_50277565c3.jpg" alt=""/><h1>这是一个标题</h1><p>关于这个六边形指向的文章的一些示例文本</p></a>
<a class="hexIn" href="#"><img src="https://farm4.staticflickr.com/3771/13199704015_72aa535bd7.jpg" alt=""/><h1>这是一个标题</h1><p>关于这个六边形指向的文章的一些示例文本</p></a>
<a class="hexIn" href="#"><img src="https://farm7.staticflickr.com/6083/6055581292_d94c2d90e3.jpg" alt=""/><h1>这是一个标题</h1><p>关于这个六边形指向的文章的一些示例文本</p></a>
<a class="hexIn" href="#"><img src="https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg" alt=""/><h1>这是一个标题</h1><p>关于这个六边形指向的文章的一些示例文本</p></a>
<a class="hexIn" href="#"><img src="https://farm7.staticflickr.com/6139/5986939269_10721b8017.jpg" alt=""/><h1>这是一个标题</h1><p>关于这个六边形指向的文章的一些示例文本</p></a>
<a class="hexIn" href="#"><img src="https://farm4.staticflickr.com/3165/5733278274_2626612c70.jpg" alt=""/><h1>这是一个标题</h1><p>关于这个六边形指向的文章的一些示例文本</p></a>
<a class="hexIn" href="#"><img src="https://farm8.staticflickr.com/7163/6822904141_50277565c3.jpg" alt=""/><h1>这是一个标题</h1><p>关于这个六边形指向的文章的一些示例文本</p></a>
<a class="hexIn" href="#"><img src="https://farm4.staticflickr.com/3771/13199704015_72aa535bd7.jpg" alt=""/><h1>这是一个标题</h1><p>关于这个六边形指向的文章的一些示例文本</p></a>
<a class="hexIn" href="#"><img src="https://farm7.staticflickr.com/6083/6055581292_d94c2d90e3.jpg" alt=""/><h1>这是一个标题</h1><p>关于这个六边形指向的文章的一些示例文本</p></a>
<a class="hexIn" href="#"><img src="https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg" alt=""/><h1>这是一个标题</h1><p>关于这个六边形指向的文章的一些示例文本</p></a>

<小时>改变每行六边形的数量
网格根据视口宽度调整每行的六边形数量，从宽于 1200 像素的屏幕上的 5 到窄于 600 像素的屏幕上的 2.
如果您不需要媒体查询而只想更改每行的六边形数量，您可以保留相应媒体查询中的 CSS 并删除不需要的 CSS.
有关更多自定义，请参阅尺寸和间距六边形.
<小时>演示
有关所有演示的列表，请参阅此 codepen 集合:六边形响应网格每行的六边形数量、居中选项等等...
这是带有 .pushercodepen 演示> 元素来制作不规则的六边形网格..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屋！


                    
                        查看全文

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

问题描述

`完整代码`

改变每行六边形的数量

演示

Hexagon grid features :

Full code

Changing the number of hexagons per row

Demos

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

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

问题描述

完整代码

改变每行六边形的数量

演示

Hexagon grid features :

Full code

Changing the number of hexagons per row

Demos

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

`完整代码`

登录关闭