偶然在微博上看到用css写一个七巧板，正好也有一些源代码，于是就试着敲了敲。

主要是利用了css3的transform，实现平移，旋转，变形，直接用看到的代码敲出来之后有些问题，因为宽度上下面绿色的三角形和右边蓝色的三角形没有做限制，所以我做出来看到的效果是这样的：

之后自己做了稍微的调整，调整之后的效果是这样的：

这里直接将板子的位置放在了浏览器的左上角，利用了border-top和border-right来进行位置的控制，下面是代码：

html代码：

<!DOCTYPE html>

<html>

<head>

	<meta charset="utf-8">

	<title>Css打造一个静态七巧板</title>

	<link rel="stylesheet" type="text/css" href="test21.css">

</head>

<body>

	<div class="wrap">

		<div class="t t1 t11"></div>

		<div class="t t2 t22"></div>

		<div class="t t3 t33"></div>

		<div class="t t4 t44"></div>

		<div class="t t5 t55"></div>

		<div class="t t6 t66"></div>

		<div class="t t7 t77"></div>

	</div>

</body>

</html>

　　Css代码：

.warp{

	position: relative;

	width: 300px;

	height: 400px;

}

.t{

	position: absolute;

	top: 0;

	left: 0;

	right: 0;

	bottom: 0;

	transform-origin:0 0;

}

.t1{

	border-top: 212px solid red;

	border-right: 212px solid transparent;

	transform:translate(150px,150px) rotate(-135deg);

}

.t2{

	border-top: 212px solid #FADF17;

	border-right: 212px solid transparent;

	transform:translate(150px,150px) rotate(135deg);

}

.t3{

	width: 106px;

	height: 106px;

	background: #C96798;

	border-left: 0px solid transparent;

	transform:translate(150px,150px) rotate(45deg);

}

.t4{

	width: 106px;

	border-top: 106px solid #00bdd0;

	border-right: 106px solid transparent;

	transform:translate(150px,150px) rotate(-45deg);

}

.t5{

	width: 0px;

	border-top: 106px solid #5dbe79;

	border-right: 106px solid transparent;

	transform:translate(75px,225px) rotate(45deg);

}

.t6{

	width: 150px;

	height: 75px;

	transform:translate(300px) rotate(90deg) skew(45deg);

	background: #ffdd01;

}

.t7{

	width: 0px;

	border-top: 150px solid #0117bf;

	border-right: 150px solid transparent;

	transform:translate(300px,300px) rotate(180deg);

}

　　

Css打造一个简单的静态七巧板的更多相关文章

  1. [.NET] 一步步打造一个简单的 MVC 网站 - BooksStore（一）

    一步步打造一个简单的 MVC 网站 - BooksStore(一) 本系列的 GitHub地址:https://github.com/liqingwen2015/Wen.BooksStore 简介 主 ...

  2. [.NET] 一步步打造一个简单的 MVC 电商网站 - BooksStore（二）

    一步步打造一个简单的 MVC 电商网站 - BooksStore(二) 本系列的 GitHub地址:https://github.com/liqingwen2015/Wen.BooksStore 前: ...

  3. [.NET] 一步步打造一个简单的 MVC 电商网站 - BooksStore（三）

    一步步打造一个简单的 MVC 电商网站 - BooksStore(三) 本系列的 GitHub地址:https://github.com/liqingwen2015/Wen.BooksStore &l ...

  4. [.NET] 一步步打造一个简单的 MVC 电商网站 - BooksStore（四）

    一步步打造一个简单的 MVC 电商网站 - BooksStore(四) 本系列的 GitHub地址:https://github.com/liqingwen2015/Wen.BooksStore &l ...

  5. [.NET] 一步步打造一个简单的 MVC 电商网站 - BooksStore（一）

    一步步打造一个简单的 MVC 电商网站 - BooksStore(一) 本系列的 GitHub地址:https://github.com/liqingwen2015/Wen.BooksStore &l ...

  6. [.NET] 一步步打造一个简单的 MVC 电商网站 - BooksStore（一） (转)

    http://www.cnblogs.com/liqingwen/p/6640861.html 一步步打造一个简单的 MVC 电商网站 - BooksStore(一) 本系列的 GitHub地址:ht ...

  7. Css实现一个简单的幻灯片效果页面

    使用animation动画实现一个简单的幻灯片效果. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 2 ...

  8. 【Css】一个简单的选项卡

    这次来做一个简单的选项卡. 选项卡其实就分3个部分:html代码,用于显示的内容:css代码,用于显示的样式:javascript代码,用于点击事件. 老规矩,先写一个html坯子. <!DOC ...

  9. 【Css】一个简单的图片库

    今天做一个简单的图片库! 其实这个在w3school教程里介绍得很好了,不过看到什么,自己动手做一次,记得也深刻不是. 我们分几步来走: 第一步:先写一个坯子. <html> <he ...

随机推荐

  1. camera placement (paraview)

    # 'renderView1' is the view name# current camera placement for renderView1 renderView1.CameraPositio ...

  2. 【codeforces 527B】Error Correct System

    [题目链接]:http://codeforces.com/contest/527/problem/B [题意] 给你两个字符串; 允许你交换一个字符串的两个字符一次: 问你这两个字符串最少会有多少个位 ...

  3. mybatis注解开发-动态SQL

    实体类以及表结构 在mybatis-config.xml中注册mapper接口 -------------------------- 动态查询@SelectProvider EmployeeMappe ...

  4. qwb与整数对

    qwb与整数对 Time Limit: 1 Sec  Memory Limit: 128 MB Description qwb又遇到了一道数学难题,你能帮助他吗? 给出两个整数n和m,请统计满足0&l ...

  5. Windows读取NXP MiFare Ultralight C类型NFC卡片的信息

    1,读取 我们需要外接一个NFC Reader让Windows可以读取NFC卡片的内容. 因为特殊原因,我们选择了Sony rc-s380 NFC Reader.相关介绍 我们需要下载并安装NFC P ...

  6. hdu 4859 最大点权独立集的变形（方格取数的变形）

    /*刚开始不会写,最大点权独立集神马都不知道,在潘神的指导下终于做出来,灰常感谢ps: 和方格取数差不多奇偶建图,对于D必割点权为0,对于.必然不割点权为inf.然后和方格取数差不多的建图 .--.| ...

  7. [luogu1373]小a和uim之大逃离_动态规划

    小a和uim之大逃离 题目大意:有一个n*m的矩阵.每个格子上有一坨0~k不等量的权值.有两个人,每个人任选一个格子作为出发点,并只能向下或向右走.求最后两个人所得到的权值mod k相等的方案数. 注 ...

  8. [MongoDB]Python 操作 MongoDB

    from pymongo import MongoClient mc = MongoClient('localhost',27017) db = mc.users db.users.save({'na ...

  9. UVa 1584 Circular Sequence(环形串最小字典序)

    题意  给你一个环形串   输出它以某一位为起点顺时针得到串的最小字典序 直接模拟   每次后移一位比較字典序就可以  注意不能用strcpy(s+1,s)这样后移  strcpy复制地址不能有重叠部 ...

  10. 解析Qt元对象系统(五) Q_INVOKABLE与invokeMethod（automatic connection从Qt4.8开始的解释已经与之前不同，发送对象驻足于哪一个线程并不重要，起到决定作用的是接收者对象所驻足的线程以及发射信号（该信号与接受者连接）的线程是不是在同一个线程）good

    概述查看Qt源码可知,Q_INVOKABLE是个空宏,目的在于让moc识别. 使用Q_INVOKABLE来修饰成员函数,目的在于被修饰的成员函数能够被元对象系统所唤起. Q_INVOKABLE与QMe ...