4

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

我想制作一个如图所示的布局

在此处输入图像描述

但我无法在基本的 html 中做到这一点。

请帮我解决一下这个。（因为它是六边形，而且它的图像不是方形的，所以我觉得有问题）

您可以从以下网址下载单位六边形： 单击此处：

4

3 回答 3

8

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

演示

您使用如下结构：

<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;
}
于 2012-10-25T08:24:41.363 回答
0 
<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
    <style type="text/css">
        .odd,
        .even{
            background:url('unite.png');
            height:202px;
            margin-bottom:-47px;
        }
        .odd{
            margin-left:88px;
        }
    </style>
</head>
<body>
    <div class="odd"></div>
    <div class="even"></div>
    <div class="odd"></div>
    <div class="even"></div>
</body>

如果这是你想要的，我会很高兴.. :)

图像的最新更改，但除非您使用 HTML 地图区域，否则链接会出现问题

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
    <style type="text/css">
        .odd{
            height:202px;
            padding-left:88px;
        }
        .even{
            height:202px;
            margin-top:-47px;
        }
    </style>
</head>
<body>
    <div class="odd">
        <img src="unite.png" />
        <img src="unite.png" />
        <img src="unite.png" />
        <img src="unite.png" />
    </div>
    <div class="even">
        <img src="unite.png" />
        <img src="unite.png" />
        <img src="unite.png" />
        <img src="unite.png" />
        <img src="unite.png" />
    </div>
</body>

于 2012-10-25T05:12:45.873 回答
0

您可以使用 HTML Map Tag 非常简单且非常精确地做到这一点，如果您使用 Dream Weaver，那将是小菜一碟，所以您需要的是六边形的实际图片并开始在 DW 或任何其他所见即所得编辑器中绘制它们有，这里是一个例子： 地图区域标签

虽然也可以通过纯 css/html 来实现，但可以通过控制 div 的边距来实现。

于 2012-10-25T04:59:13.730 回答