<分区>
Possible Duplicate:
Generate repeating hexagonal pattern with CSS3
我想做一个如图所示的布局
但我无法在基本的 html 中执行此操作。
请帮我解决这个问题。 (因为它是六边形的，而且它的图像不是正方形的，所以我有问题)
您可以从: Click here : 下载单位六边形
<分区>
Possible Duplicate:
Generate repeating hexagonal pattern with CSS3
我想做一个如图所示的布局
但我无法在基本的 html 中执行此操作。
请帮我解决这个问题。 (因为它是六边形的，而且它的图像不是正方形的，所以我有问题)
您可以从: Click here : 下载单位六边形
最佳答案
你可以用更简单的方式来做:
你使用这样的结构:
<div class='box-wrapper'>
<div class='row'>
<div class='hexagon'><a href='#'></a></div>
<!--and so on, more hexagons-->
</div>
<!--and so on, more rows-->
</div>
CSS 很简单:
.box-wrapper { margin: 5em 1em 1em; border: solid 1px silver; padding: 3.2em 0; }
.row { margin: -1.6em 0; text-align: center; }
.hexagon {
display: inline-block;
overflow: hidden;
width: 8em; height: 8em;
transform: rotate(-30deg) skewX(30deg) scaleY(.866);
}
.hexagon a {
display: block;
height: 100%;
transform: scaleY(1.155) skewX(-30deg) rotate(30deg) scaleX(.866);
background: gainsboro;
}
关于HTML 非方形布局设计问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13061624/