Css打造一个简单的静态七巧板

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

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

Css打造一个简单的静态七巧板

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

Css打造一个简单的静态七巧板

这里直接将板子的位置放在了浏览器的左上角，利用了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打造一个简单的静态七巧板的更多相关文章

[&period;NET] 一步步打造一个简单的 MVC 网站 - BooksStore（一）
一步步打造一个简单的 MVC 网站 - BooksStore(一) 本系列的 GitHub地址:https://github.com/liqingwen2015/Wen.BooksStore 简介主 ...
[&period;NET] 一步步打造一个简单的 MVC 电商网站 - BooksStore（二）
一步步打造一个简单的 MVC 电商网站 - BooksStore(二) 本系列的 GitHub地址:https://github.com/liqingwen2015/Wen.BooksStore 前: ...
[&period;NET] 一步步打造一个简单的 MVC 电商网站 - BooksStore（三）
一步步打造一个简单的 MVC 电商网站 - BooksStore(三) 本系列的 GitHub地址:https://github.com/liqingwen2015/Wen.BooksStore &l ...
[&period;NET] 一步步打造一个简单的 MVC 电商网站 - BooksStore（四）
一步步打造一个简单的 MVC 电商网站 - BooksStore(四) 本系列的 GitHub地址:https://github.com/liqingwen2015/Wen.BooksStore &l ...
[&period;NET] 一步步打造一个简单的 MVC 电商网站 - BooksStore（一）
一步步打造一个简单的 MVC 电商网站 - BooksStore(一) 本系列的 GitHub地址:https://github.com/liqingwen2015/Wen.BooksStore &l ...
[&period;NET] 一步步打造一个简单的 MVC 电商网站 - BooksStore（一） (转)
http://www.cnblogs.com/liqingwen/p/6640861.html 一步步打造一个简单的 MVC 电商网站 - BooksStore(一) 本系列的 GitHub地址:ht ...
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 ...
【Css】一个简单的选项卡
这次来做一个简单的选项卡. 选项卡其实就分3个部分:html代码,用于显示的内容:css代码,用于显示的样式:javascript代码,用于点击事件. 老规矩,先写一个html坯子. <!DOC ...
【Css】一个简单的图片库
今天做一个简单的图片库! 其实这个在w3school教程里介绍得很好了,不过看到什么,自己动手做一次,记得也深刻不是. 我们分几步来走: 第一步:先写一个坯子. <html> <he ...

随机推荐

基于AngularJS的企业软件前端架构[转载]
这篇是我参加QCon北京2014的演讲内容: 提纲: 企业应用在软件行业中占有很大的比重,而这类软件多数现在也都采用B/S的模式开发,在这个日新月异的时代,它们的前端开发技术找到了什么改进点呢? B/ ...
catalina&period;properties
追踪 startup.bat set "EXECUTABLE=%CATALINA_HOME%\bin\catalina.bat" call "%EXECUTABLE%&q ...
mysql 二进制文件增量备份
1.首先在my.cnf下添加二进制文件路径(windows下文件名称为my.ini) 在[mysqld]下添加 log-bin=mysql-bin 2.centos下默认安装mysql 5.6,数据默 ...
java并发编程-读写锁
最近项目中需要用到读写锁读写锁适用于读操作多,写操作少的场景,假设你的程序中涉及到对一些共享资源的读和写操作,且写操作没有读操作那么频繁.在没有写操作的时候,两个线程同时读一个资源没有任何问题,所以 ...
Silverlight项目笔记6&colon;Linq求差集、交集&amp&semi;检查网络连接状态&amp&semi;重载构造函数复用窗口
1.使用Linq求差集.交集使用场景: 需要从数据中心获得用户数据,并以此为标准,同步系统的用户信息,对系统中多余的用户进行删除操作,缺失的用户进行添加操作,对信息更新了的用户进行编辑操作更新. 所 ...
C&num;的三大特性
每个新手基本上都知道C#的三大特性,但是今天我给自己总结了一下这三大特性 1.封装被定义为"把一个或多个项目封闭在一个物理的或者逻辑的包中".在面向对象程序设计方法论中,封装是为 ...
[转] &OpenCurlyDoubleQuote;error LNK2019&colon; 无法解析的外部符号”之分析
HiLoveS原文“error LNK2019: 无法解析的外部符号”之分析最近在用VS 2008开发,初学遇到不少问题,最头疼的问题之一就是:LNK2019. 百度一下讲的并不够全面,反正都没解决 ...
EF4&period;1之Code first 的几种连接数据库的方式
通过代码进行连接和创建数据库的方法主要分为两种: 1.使用用连接字符串(在配置文件里面): 连接字符串: <add name="DbEntities" connection ...
java中jdk环境配置
配置java环境,俗称jdk环境首先进入配置环境的目录下:右键鼠标我的电脑->属性->高级系统设置->环境变量,在对应的"系统变量"框下配置一下变量: 规范的配 ...
HDU - 6167： Missile Interception （二分+圆的交）
pro:二维平面上,给点N个导弹的初始位置,射出方向,速度.问你是找一点,可以从这一点向任意方向发出拦截导弹,速度未V,最小化最大拦截导弹的时间. 如果要拦截一个导弹,必须在导弹发射之后才可以发射拦 ...