制作菱形图

制作菱形图

今天看到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>
 
时间: 12-29

制作菱形图的相关文章

在Excel中制作雷达图

雷达图的作用 雷达图是专门用来进行多指标体系比较分析的专业图表.从雷达图中可以看出指标的实际值与参照值的偏离程度,从而为分析者提供有益的信息.雷达图一般用于成绩展示.效果对比量化.多维数据对比等等,只要有前后2组3项以上数据均可制作雷达图,其展示效果非常直观,而且图像清晰耐看,而且通过EXCEL 2007(含)以上版本制作的雷达图非常漂亮,而且还可个性美化. 文中的雷达图只是方便以后记忆,故不详,具体细节没有截图保存,详细了解的,请自行百度

JFreeChart在制作折线图

JFreeChart在制作折线图的时候可以使用两种不同的方式 package Line; import java.awt.Color; import java.awt.Font; import org.jfree.chart.ChartFactory; import org.jfree.chart.ChartFrame; import org.jfree.chart.JFreeChart; import org.jfree.chart.StandardChartTheme; import org

c语言:输出一个菱形图

输出一个菱形图. 解:程序: #include<stdio.h> int main() { int i, j; char diamond[][5] = { {' ',' ','*'},{' ','*',' ','*'},{'*',' ',' ',' ','*'},{ ' ','*',' ','*' },{ ' ',' ','*' } }; //diamond 菱形,钻石,金刚石 for (i = 0; i < 5; i++) { for (j = 0; j < 5; j++) {

excel具有制作甘特图的功能

1.Excel最大功能:数据处理.统计分析. 2.数据有效性验证: 长数字输入方法,文本前面加英文"'"(单引号)或使用文本转换. 身份证号:数据.数据有效性.文本长度. 性别:数据.数据有效性.序列.多数据内容用英文","(逗号)隔开. 3.甘特图表(制作工期图):插入.条形图.二维条形图.堆积图条形图.设置数据系列格 式.填充或背景设置为无. 如图: 4.组合图表:插入.柱形图.二维柱形图.更改图表类型.设置数据系列格式.次坐标图. 如图: 5.公式:公式必须以

使用ggbio在R中制作弦图

分享一个制作弦图的R包:ggbio. 效果图和代码如下.稍后解释具体用法... library(GenomicRanges) set.seed(1) N <- 100 gr <- GRanges(seqnames = sample(c("chr1", "chr2", "chr3"), size = N, replace = TRUE), IRanges(start = sample(1:300, size = N, replace =

python批量制作雷达图

老板要画雷达图,但是数据好多组怎么办?不能一个一个点excel去画吧,那么可以利用python进行批量制作,得到样式如下: 首先制作一个演示的excel,评分为excel随机数生成: 1 =INT((RAND()+4)*10)/10 加入标签等得到的excel样式如下(部分,共计32行): 那么接下来就是打开python写码了,本文是基于python3.4进行编写 1 wb = load_workbook(filename=r'C:\Users\Administrator\Desktop\数据指

如何使用myFocus插件制作焦点图效果

焦点图分有:flash焦点图  js焦点图  css焦点图  jQ焦点图(其中jQ焦点图以代码量少,实现功能成为首选): myFocus是一款专注于焦点图制作的js插件: 使用步骤:点击下载——Demo显示打包下载——点击 下载的链接——下载 注:在引用myFocus插件时只需要把下载后myFocus的整个js文件复制到自己的站点的js里即可: js部分: <script type="js/myfocus-2.0.1.min.js" type="text/javascr

怎么制作GIF 制作动态图的软件哪个好

GIF在日常的聊天中使用较多,不仅仅可以调节氛围,还增加了很多的趣味性,同时也避免了很多的尴尬,可能很多人都和小编一样,最初使用的表情包都是手机中自带的,其实自己也是可以制作的,那怎么制作GIF,制作动态图的软件哪个好呢?1.首先今天说的是一个电脑端的GIF制作工具,将要制作的素材都准备好,然后在电脑上运行迅捷GIF制作工具即可:2.安装同款制作工具,双击打开之后会出现两个选择,一个是直接录制电脑屏幕,一个是对已有素材进行编辑:3.找好要制作的GIF的素材或者视频来源,点击"启动屏幕录制&quo

项目管理甘特图是什么?怎么做才能更高效?(EXCEL制作甘特图详细步骤)

项目管理甘特图是什么?甘特图即Gantt chart,又被称之为横道图.条状图.其命名是由提出者亨利·L·甘特(Henrry L.Ganntt)先生的名字而来的.甘特图是以图示的方式,并通过活动列表和时间刻度,来形象地表示出某些特定项目的活动顺序和持续时间. 关于项目管理甘特图是什么?怎么做才能更高效?(EXCEL制作甘特图详细步骤)可以加群647240543,自己去下载. 甘特图是项目管理中常用的一种图表,与平时常见的统计表格略有不同,它的内容更加复杂,绘制起来也更费力一些.管理项目不容易,可