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

偶然在微博上看到用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);
}

　　

 

posted @ 2017-05-19 15:53  恪晨博客  阅读(1111)  评论(0)  编辑  收藏  举报