用CSS3生成重复的六angular形图案
所以，我需要使用CSS来制作重复的六边形图案。 如果需要图片，我可以去那里，但我更喜欢只要可能就使用CSS。
以下是我想要创build的内容的一个概念：
基本上，我只需要一种方法来创build六边形的形状，然后覆盖文本/图像的顶部。 我还没有太多的代码，因为我不确定从哪里开始。 问题是，我可以像使用（ http://css-tricks.com/examples/ShapesOfCSS/ ）中所示的六angular形的形状使用<div> ，但它们不会连接。 我可以使用重复的六边形图案，但是我不能指定特定形状所需的文本或图像的确切位置。 提前感谢您的帮助。
（尽pipe安娜的答案是在我的几个月后才出现的，可能是以我为基础的“思考”，但是她能够用一个单独的div来提出一个方法的事实值得推广，所以请检查她的答案 -但请注意，hex中的内容更加有限。）
这真是一个非常了不起的问题。 谢谢你的提问。 伟大的事情是这样的事实：
这小提琴certificate你可以做到！
原来的小提琴使用 （修改后来的编辑，以提高链接上面） – 它利用imgur.com图像，这似乎是不是非常可靠的加载，所以新的小提琴使用photobucket.com（ 让我知道，如果有持久性图片加载问题 ）。 我已经保留了原来的链接，因为下面的解释代码与那个（有一些不同的background-size或position到新的小提琴）。
这个想法在读完你的问题后几乎立刻就find了，但花了一些时间来实现。 我最初试图得到一个单一的“hex”的div和只是伪元素，但最好的我可以告诉，没有办法只是旋转background-image （我需要），所以我不得不添加一些额外的div元素来获取hex的右侧/左侧，以便我可以使用伪元素作为background-image旋转的手段。
我testing了IE9，FF和Chrome。 从理论上讲，任何支持CSS3的浏览器都应该可以工作。
第一次主要更新（补充说明）
我现在有一些时间来发表一些代码解释，所以这里是：
首先，六angular形由30/60度关系和三angular定义，所以这些将是涉及的关键angular度。 其次，我们从一个“行”开始，使用hex网格.Html被定义为（额外的div元素帮助构buildhex）：
<div class="hexrow"> <div> <span>First Hex Text</span> <div></div> <div></div> </div> <div> <span>Second Hex Text</span> <div></div> <div></div> </div> <div> <span>Third Hex Text</span> <div></div> <div></div> </div> </div>
我们将使用inline-block来display六angular形，但是我们不希望它们意外地包装到下一行并毁坏网格，所以white-space: nowrap解决了这个问题。 这一行的margin将取决于您希望在hex之间有多less空间，可能需要进行一些实验才能获得所需的内容。
.hexrow { white-space: nowrap; /*right/left margin set at (( width of child div x sin(30) ) / 2) makes a fairly tight fit; a 3px bottom seems to match*/ margin: 0 25px 3px; }
使用.hexrow的正好是div元素的孩子，我们构成了hex形状的基础。 width将驱动六angular形顶部的水平面， height从该数字导出，因为所有边在正六边形上的长度相等。 同样，边距将取决于间距，但这是单个六边形的“重叠”将出现的地方，以使网格看起来发生。 background-image被定义一次，在这里。 左边的位移是为了适应六边形左侧的宽度。 假设你想居中文本， text-align处理水平（当然），但与line-height匹配的行height将允许垂直居中。
.hexrow > div { width: 100px; height: 173.2px; /* ( width x cos(30) ) x 2 */ /* For margin: right/left = ( width x sin(30) ) makes no overlap right/left = (( width x sin(30) ) / 2) leaves a narrow separation */ margin: 0 25px; position: relative; background-image: url(http://i.imgur.com/w5tV4.jpg); background-position: -50px 0; /* -left position -1 x width x sin(30) */ background-repeat: no-repeat; color: #ffffff; text-align: center; line-height: 173.2px; /*equals height*/ display: inline-block; }
每个奇数的hex数将会相对于“行”向下移动，并且每个数字甚至会上移。 移位计算（宽度×cos（30）/ 2）也与（height / 4）相同。
.hexrow > div:nth-child(odd) { top: 43.3px; /* ( width x cos(30) / 2 ) */ } .hexrow > div:nth-child(even) { top: -44.8px; /* -1 x( ( width x cos(30) / 2) + (hexrow bottom margin / 2)) */ }
我们使用2个子div元素来创buildhex的“翅膀”。 它们的大小与主六angular矩形的大小相同，然后旋转，并且推到主六angular的“下方”。 Background-image被inheritance，所以图像是相同的（当然），因为“翅膀”中的图像将被“排列”到主矩形中的图像。 伪元素用于生成图像，因为它们需要“重新旋转”回到水平（因为我们旋转了它们的父元素来创build“翅膀”）。
在第一个:before将翻译其背景负数的宽度相当于hex的主要部分加上主hex的原始背景移位。 在第二个:before将会改变平移的原点，并且将在x轴上移动主宽度，在y轴上移动一半高度。
.hexrow > div > div:first-of-type { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: -1; overflow: hidden; background-image: inherit; -ms-transform:rotate(60deg); /* IE 9 */ -moz-transform:rotate(60deg); /* Firefox */ -webkit-transform:rotate(60deg); /* Safari and Chrome */ -o-transform:rotate(60deg); /* Opera */ transform:rotate(60deg); } .hexrow > div > div:first-of-type:before { content: ''; position: absolute; width: 200px; /* width of main + margin sizing */ height: 100%; background-image: inherit; background-position: top left; background-repeat: no-repeat; 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; } .hexrow > div > div:last-of-type { content: ''; position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: -2; overflow: hidden; background-image: inherit; -ms-transform:rotate(-60deg); /* IE 9 */ -moz-transform:rotate(-60deg); /* Firefox */ -webkit-transform:rotate(-60deg); /* Safari and Chrome */ -o-transform:rotate(-60deg); /* Opera */ transform:rotate(-60deg); } .hexrow > div > div:last-of-type:before { content: ''; position: absolute; width: 200px; /* starting width + margin sizing */ height: 100%; background-image: inherit; background-position: top left; background-repeat: no-repeat; bottom: 0; left: 0; z-index: 1; /*translate properties are initial width (100px) and half height (173.2 / 2 = 86.6) */ -ms-transform:rotate(60deg) translate(100px, 86.6px); /* IE 9 */ -moz-transform:rotate(60deg) translate(100px, 86.6px); /* Firefox */ -webkit-transform:rotate(60deg) translate(100px, 86.6px); /* Safari and Chrome */ -o-transform:rotate(60deg) translate(100px, 86.6px); /* Opera */ transform:rotate(60deg) translate(100px, 86.6px); -ms-transform-origin: 100% 0; /* IE 9 */ -webkit-transform-origin: 100% 0; /* Safari and Chrome */ -moz-transform-origin: 100% 0; /* Firefox */ -o-transform-origin: 100% 0; /* Opera */ transform-origin: 100% 0; }
这个span存放你的文本。 line-height被重置以使文本的行正常，但是vertical-align: middle作品由于父line-height较大。 white-space被重置，所以它允许再次包装。 左/右边距可以设置为负值，以允许文本进入六angular的“翅膀”。
.hexrow > div > span { display: inline-block; margin: 0 -30px; line-height: 1.1; vertical-align: middle; white-space: normal; }
您可以在这些行中单独定位行和单元格以更改图像，或者span文本设置或不透明度，或者适应更大的图像（将其移至所需的位置）等。以下是第二行。
.hexrow:nth-child(2) > div:nth-child(1) { background-image: url(http://i.imgur.com/7Un8Y.jpg); } .hexrow:nth-child(2) > div:nth-child(1) > span { /*change some other settings*/ margin: 0 -20px; color: black; font-size: .8em; font-weight: bold; } .hexrow:nth-child(2) > div:nth-child(2) { background-image: url(http://i.imgur.com/jeSPg.jpg); } .hexrow:nth-child(2) > div:nth-child(3) { background-image: url(http://i.imgur.com/Jwmxm.jpg); /*you can shift a large background image, but it can get complicated best to keep the image as the total width (200px) and height (174px) that the hex would be. */ background-position: -150px -120px; opacity: .3; color: black; } .hexrow:nth-child(2) > div:nth-child(3) > div:before { /*you can shift a large background image, but it can get complicated best to keep the image as the total width (200px) and height (174px) that the hex would be. */ background-position: -100px -120px; /* the left shift is always less in the pseudo elements by the amount of the base shift */ } .hexrow:nth-child(2) > div:nth-child(4) { background-image: url(http://i.imgur.com/90EkV.jpg); background-position: -350px -120px; } .hexrow:nth-child(2) > div:nth-child(4) > div:before { background-position: -300px -120px; }
实际上，每个六边形只能有一个元素，而背景图像和文本只有伪元素。
演示
基本的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>
你可以有更多的行，你只需要在奇数行上有n六边形，在偶数行上有n+/-1六边形。
相关的CSS ：
* { box-sizing: border-box; margin: 0; padding: 0; } .row { margin: -18.5% 0; text-align: center; } .row:first-child { margin-top: 7%; } .hexagon { position: relative; display: inline-block; overflow: hidden; margin: 0 8.5%; padding: 16%; transform: rotate(30deg) skewY(30deg) scaleX(.866); /* .866 = sqrt(3)/2 */ } .hexagon:before, .content:after { display: block; position: absolute; /* 86.6% = (sqrt(3)/2)*100% = .866*100% */ top: 6.7%; right: 0; bottom: 6.7%; left: 0; /* 6.7% = (100% -86.6%)/2 */ transform: scaleX(1.155) /* 1.155 = 2/sqrt(3) */ skewY(-30deg) rotate(-30deg); background-color: rgba(30,144,255,.56); background-size: cover; content: ''; } .content:after { content: attr(data-content); } /* add background images to :before pseudo-elements */ .row:nth-child(n) .hexagon:nth-child(m):before { background-image: url(background-image-mxn.jpg); }
我将提供一个如何创build六angular形的简单演示。
HTML
<div class="hex"> <div class="box"> </div> </div>
CSS
.hex { width: 40px; height: 70px; margin: 20px; overflow: hidden; } .hex .box { -moz-transform: rotate(45deg); background: #f00; width: 50px; height: 50px; display: inline-block; margin: 10px -5px 10px -5px; }
这是另一种使用COMPASS / SCSS的方法，可以方便地设置六边形的大小和布局：
如果你能够实现div形状技巧，那么简单地给每个div一个position:relative （你将不得不首先逐个放置它们，也可以设置top和left ）
您只能使用CSS创build一个完全响应的六angular形网格。 这个想法是使用CSS2.1溢出来创build父级形状作为掩码：hidden几乎与所有浏览器兼容，甚至是Internet Explorer 6。
这是一个令人惊讶的简单的技术，可以用来创build各种形状的响应式网格，它只是需要外部思考来解决问题。
我有一个广泛的一步一步指导如何做到这一点在这里： https : //www.codesmite.com/article/how-to-create-pure-css-hexagonal-grids
这是迄今为止我find的最好的方法，不需要JavaScript，既stream畅又响应。
我还在免费的HTML模板中使用了该技术，其中包括六边形内的图像，您可以在这里进行演示和下载： https : //www.codesmite.com/freebie/hexa-free-responsive-portfolio-template
AFAIK，纯粹的CSS没有办法。 你最好的select是使用面具剪辑的背景，这里解释： http : //www.cssbakery.com/2009/06/background-image.html （这将只适用于如果你的页面背景是纯色或你可以适应并定位您的面具以匹配页面背景。
然后你可以使用csstextwrap来适应文本： http : //www.csstextwrap.com/examples.php
SO上有一堆类似的问题。 例如任何方式有文本在div填充三angular形形状？
