标签：
制作菱形图
今天看到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>
标签：
原文地址：http://www.cnblogs.com/alisalixue/p/5089488.html
