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

HTML マップ タグを使用すると、非常に簡単かつ完全に正確に行うことができます。Dream Weaver を使用する場合、それは簡単なことです。必要なのは実際の六角形の画像であり、DW またはその他の WYSIWYG エディターで描画を開始します。以下に例を示します: マップ エリア タグ

divのマージンを制御することで、純粋なcss/htmlでも実現できますが。

于 2012-10-25T04:59:13.730 に答える
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 に答える