HTML非方形布局设计问题

Question

可能重复:
使用CSS3生成重复的六边形图案

我想在图像中进行布局

但我无法在基本的HTML中执行此操作.

请帮我解决一下这个.(因为它是六边形,它的图像不是方形布线,所以我是一个简单的问题)

您可以从以下位置下载单位六角形:点击此处:

Answer 1

你可以用更简单的方式做到这一点:

演示

您使用如下结构:

<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;
}