带有CSS的六边形图案 [英] Hexagonal pattern with CSS
问题描述
我找到了一个很棒的关于如何使用CSS创建六角形木纹的stackoverflow答案.
I found a great stackoverflow answer on how to create a hexagonal patten using CSS.
这几乎是完美的，除了我想以其他方式翻转六边形(即，点在顶部).通过交换主要十六进制div的宽度/高度，我已经很容易做到这一点:(hexrow> div)...但是我真的很难在其他支持div上重新对齐背景图像.我一直试图弄清楚这一点，但没有取得太大的成功.
It's almost perfect, except i'd like to flip the hexagons the other way (ie. so the point is at the top). I've managed to do this fairly easily by swapping the main hex div width/height: (hexrow > div)... however i'm really struggling to re-align the background image on the other supporting divs. I've been trying to figure it out for a while now without much success.
任何人都可以发布展示其效果的jsFiddle吗?
Could anyone possibly post a jsFiddle that shows how it's done?
这是我目前所在的位置:我已经尝试了什么
This is where i'm at currently: What i've tried
..我相信这是我需要修改的:
..and i believe this is what i need to amend:
.hexrow > div > div:first-of-type:before {
content: '';
position: absolute;
width: 200px; /* width of main + margin sizing */
height: 100%;
background-image: inherit;
background-position: 0 0;
background-repeat: no-repeat;
background-size: 120% auto;
bottom: 0;
left: 0;
z-index: 1;
-ms-transform:rotate(-60deg) translate(-150px, 0); /* IE 9 */
-moz-transform:rotate(-60deg) translate(-150px, 0); /* Firefox */
-webkit-transform:rotate(-60deg) translate(-150px, 0); /* Safari and Chrome */
-o-transform:rotate(-60deg) translate(-150px, 0); /* Opera */
transform:rotate(-60deg) translate(-150px, 0);
-ms-transform-origin: 0 0; /* IE 9 */
-webkit-transform-origin: 0 0; /* Safari and Chrome */
-moz-transform-origin: 0 0; /* Firefox */
-o-transform-origin: 0 0; /* Opera */
transform-origin: 0 0;
}
任何帮助，不胜感激.
推荐答案
使用:nth-of-type(odd)和:nth-of-type(even)>，并为同一行上的奇/偶六边形设置不同的边距.
Use :nth-of-type(odd) and :nth-of-type(even) and set different margins for odd/ even hexagons on the same row.
或者您可以用更简单的方式来做，而只需较少的标记-检查我对这个问题的回答和<我刚刚做了一个href ="http://codepen.io/thebabydino/full/hxEwA" rel ="nofollow noreferrer">此演示.想法是，对元素(具有 overflow:隐藏)的元素进行一系列变换，以得到锐角为 60度的菱形，然后如果需要，请以相反的顺序撤消所有伪元素或子元素的转换(与元素本身具有相同的 height ，但仅<<>>.866 code> width ，因为.866是六边形的两个平行边之间的距离与它的大对角线之间的距离的比率)，您实际上在其上应用了 background-image .因此，不会出现未对准的可能性，因为背景图像仅应用于一个元素.
Or you could do it in a much simpler manner, with less markup - check my answer at that question and this demo I just did. The idea is that you apply a series of transforms on the element (which has overflow: hidden) in order to get a rhombus with an acute angle of 60 degrees and then you undo all those transforms in reverse order for a pseudo-element or a child element if you wish (having the same height as the element itself, but only .866 of its width, because .866 is the ratio of the distance between two parallel sides of a hexagon and its big diagonal) on which you actually apply the background-image. So there's no chance of misalignment, because the background image is only applied on one element.
基本 HTML 结构:
<div class='row'>
<div class='hexagon'></div>
</div>
<div class='row'>
<div class='hexagon content ribbon' data-content='This is a test!!!
9/10'></div><!--
--><div class='hexagon content longtext' data-content='Some longer text here.
Bla bla bla bla bla bla bla bla bla bla blaaaah...'></div>
</div>
相关的 CSS :
.row { margin: -8% 0%; text-align: center; }
.row:first-child { margin-top: 2.25%; }
.hexagon {
position: relative;
display: inline-block;
overflow: hidden;
margin: 0 -1.5%;
padding: 16%;
transform: rotate(-30deg) skewX(30deg) scaleY(.866); /* .866 = sqrt(3)/2 */
}
.hexagon:before {
display: block;
position: absolute; /* 86.6% = (sqrt(3)/2)*100% = .866*100% */
right: 6.7%; bottom: 0; left: 6.7%; top: 0; /* 6.7% = (100% -86.6%)/2 */
transform: scaleY(1.155) skewX(-30deg) rotate(30deg); /* 1.155 = 2/sqrt(3) */
background-color: rgba(30,144,255,.56);
background-size: cover;
content: '';
}
.row:first-child .hexagon:first-child:before {
background-image: url(img.jpg);
}
/* and so on, add background images for all hexagons */
这篇关于带有CSS的六边形图案的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
