怎么生成六边形组成的蜂窝形状?

http://www.cqjiaxuan.cn/UploadFile/20081226102910141.jpg 这样的效果

解决方案 »

  1.   

    六角形里的网友自定义头象可以放在DIV里 通过z-index设置层叠效果
      

  2.   

    嗯。
    vml可以做得到，不过只适合IE就是了
    不然只能用后台程序自己画了
      

  3.   

    六边形用VML画,但中间的图像是显示图片(已经存在服务器上的),
      

  4.   

    GIF图片+DIV层+绝对定位+位置算法，应该能实现。我对楼主的这个需求比较感兴趣，这是什么样的网站呢？
      

  5.   

    超强人---------------------------------
    http://www.51sooho.cn
      

  6.   

    我的建议是不用vml，就用div就可以。
    1.让美工帮你做一正六边形图片作背景
    2.设置div的css样式使图片作为div的背景，并设置div决定定位，和字体样式等
    3.计算每一div的坐标。其实只需要先确定一个就好说了，其他的按分布方向的不同
      加减适当的数值就可以了
    4.中间的文字简单，直接设置innerHTML
    只有第三步稍复杂
      

  7.   

    期待好的答案，其实用Flash也是一个不错的方案
      

  8.   

    Flash 就主文件太大,所以选择用代码来实现.DIV可是正方形哦,如果把六边形放在里面,会排列得那么紧密吗?
      

  9.   

    可是这样的图哦,大概看了一下,好像用DIV不行哦
      

  10.   

    我给你几个建议:推荐程度从1-5.
    1:在!-ÿ字符中,查看对应的wingdings字体是否有这种形状.
    2:在!-ÿ字符中,查看对应的webings字体是否有这种形状.
    3:用VML的<v:Polyline或<v:Shape绘制
    4:用VML的o:spt,找一招有没有这种形状.
    5:用js算法绘制.
      

  11.   

    div应该是最简单的
    因为美工太差不会做图片用的楼主提供的图片在画图下切割出来的尺寸是宽85高75.
    csdn不能传图，需要你自己切一个图片才能看到效果。若果你的图片尺寸合适的话
    计算非常简单。
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>模拟蜂窝</title>
    <style type="text/css">
    .divNeil{
    background-image:url(range.JPG);
    width:85px;
    height:75px;
    position:absolute;
    text-align:center;
    line-height:75px;
    left: 290px;
    top: 272px;
    }
    </style>
    </head>
    <body>
    <div class="divNeil" style="left:100px;top:100px;">11</div>
    <div class="divNeil" style="left:163px;top:137px;">22</div>
    <div class="divNeil" style="left:100px;top:173px;">33</div>
    <div class="divNeil" style="left:36px;top:137px;">44</div>
    </body>
    </html>
      

  12.   

    为了演示上传了个资源http://download.csdn.net/source/929386
      

  13.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>模拟蜂窝</title>
    <style type="text/css">
    .divNeil{
        background-image:url(range.JPG);
        width:85px;
        height:75px;
        position:absolute;
        text-align:center;
        line-height:75px;
        left: 290px;
        top: 272px;
    }
    </style>
    </head>
    <body>
    <div class="divNeil" style="left:100px;top:100px;">11</div>
    <div class="divNeil" style="left:163px;top:137px;">22</div>
    <div class="divNeil" style="left:100px;top:173px;">33</div>
    <div class="divNeil" style="left:36px;top:137px;">44</div>
    </body>
    </html>