制作菱形图

制作菱形图

 

 

制作菱形图

今天看到w3plus上面的一篇文章http://www.w3cplus.com/preprocessor/diamond-grid-using-sass.html
个人觉得他的实现方法很麻烦，于是用了栅格化写法写了一个比较简单的demo

思路如下：

1、首先：我将这个倾斜的图逆时针旋转正了过来，当然你也可以顺时针旋转，正过来后比较符合我们平时看到的网页形态。

2、分析：分析这个图，从上往下分析，大概可以分成三行

所以我们的html结构可以是酱紫的，用一个wrap把这三行包围起来，那么我旋转wrap就可以实现旋转样式了。

3、细节: 注意看每一行，有不同的色块，每一个色块由很多方形小块组成，这些小块宽度相同
所以我定义了一个公共宽度，布局用flex布局
有关flex布局，我觉得一峰大哥写的很好
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool

4、代码我用了sass，个人觉得用sass比较简单，我也是刚刚学习的sass，不过已经爱上她了，如果对sass不熟悉，可以用在线转译，转成css代码，链接如下：
http://www.sassmeister.com/
我的sass代码如下：

$item-w:50px;
/* 公共 */
.flex-colum-w{
    display:flex;
    display:-webkit-flex;
    flex-direction:row;
    flex-wrap:wrap;
}
.flex-colum-nw{
    display:flex;
    display:-webkit-flex;
    flex-direction:row;
    flex-wrap:nowrap;
}
.item-com{
    width: $item-w;
    height: $item-w;
    box-sizing:border-box;
    border:1px solid #999;
}
/* 公共 */
/* 颜色 */
$color1:#b1c81f;
$color2:#e97313;
$color3:#fadb32;


@mixin box($count,$marCon,$color){
    width:$item-w*$count;
    height:$item-w*$count;
    margin-left:$item-w*$marCon;
    @extend .flex-colum-w;
    li{
        @extend .item-com;
        background:$color;
    }
}
@mixin rot($ang){
    transform:rotate($ang)
    -moz-transform:rotate($ang);
    -webkit-transform:rotate($ang);
    -o-transform:rotate($ang)
}
.wrap{
    width:$item-w*8;
    margin:0 auto;
    //@include rot(45deg);
    .row1 .col1{
        @include box(3,3,$color1)
    }
    .row2{
        @extend .flex-colum-nw;
        .col1{
            margin-top: $item-w * 2;
            @include box(2,0,$color2)
        }
        .col2{
            @include box(4,0,$color3);
        }
        .col3{
            @include box(2,0,$color2)
        }
        
    }
    .row3 .col1{
        @include box(3,2,$color1)
    }
}

 

html代码：这个结构比较简单，我们可以用zen coding写html， 很快，很方便，可以减少很多编程时间：

.wrap>((.row1>ul.col1>li*9)+(.row2>((ul.col1>li*4)+(ul.col2>li*16)+(ul.col3>li*4)))+(.row3>ul.col1>li*9))

 

tab键之后代码如下：

<div class="wrap">
           <div class="row1">
               <ul class="col1">
                   <li></li>
                   <li></li>
                   <li></li>
                   <li></li>
                   <li></li>
                   <li></li>
                   <li></li>
                   <li></li>
                   <li></li>
               </ul>
           </div>
           <div class="row2">
               <ul class="col1">
                   <li></li>
                   <li></li>
                   <li></li>
                   <li></li>
               </ul>
               <ul class="col2">
                   <li></li>
                   <li></li>
                   <li></li>
                   <li></li>
                   <li></li>
                   <li></li>
                   <li></li>
                   <li></li>
                   <li></li>
                   <li></li>
                   <li></li>
                   <li></li>
                   <li></li>
                   <li></li>
                   <li></li>
                   <li></li>
               </ul>
               <ul class="col3">
                   <li></li>
                   <li></li>
                   <li></li>
                   <li></li>
               </ul>
           </div>
           <div class="row3">
               <ul class="col1">
                   <li></li>
                   <li></li>
                   <li></li>
                   <li></li>
                   <li></li>
                   <li></li>
                   <li></li>
                   <li></li>
                   <li></li>
               </ul>
           </div>
       </div>