如果纯粹想要实现这个效果
用html5 canvas好实现

解决方案 »

  1.   

    .we
    {
     border-radius: 62px; /* 所有角都使用半径为5px的圆角,此属性为CSS3标准属性 */
        -moz-border-radius:62px; /* Mozilla浏览器的私有属性 */
        -webkit-border-radius: 62px; /* Webkit浏览器的私有属性 */
        background:#000;
        width:62px; height:62px;
        border-radius: 62px 62px 62px 62px; /* 四个半径值分别是左上角、右上角、右下角和左下角 */
        margin-left: 15px; margin-top:15px; float: left; color: #FFF;
        color: #FFF;
    }
    <div class="we"></div>
      

  2.   

    .we
    {
     border-radius: 62px; /* 所有角都使用半径为5px的圆角,此属性为CSS3标准属性 */
        -moz-border-radius:62px; /* Mozilla浏览器的私有属性 */
        -webkit-border-radius: 62px; /* Webkit浏览器的私有属性 */
        background:#000;
        width:62px; height:62px;
        border-radius: 62px 62px 62px 62px; /* 四个半径值分别是左上角、右上角、右下角和左下角 */
        margin-left: 15px; margin-top:15px; float: left; color: #FFF;
        color: #FFF;
    }
    <div class="we"></div>我现在不是画了个圆了啊  我要做成效果图那样 用算法 画上去。。怎么画1个个画 到时候维护太麻烦了
      

  3.   

    本帖最后由 xuzuning 于 2014-04-19 10:13:05 编辑