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);
}
Css打造一个简单的静态七巧板的更多相关文章
- [.NET] 一步步打造一个简单的 MVC 网站 - BooksStore(一)
一步步打造一个简单的 MVC 网站 - BooksStore(一) 本系列的 GitHub地址:https://github.com/liqingwen2015/Wen.BooksStore 简介 主 ...
- [.NET] 一步步打造一个简单的 MVC 电商网站 - BooksStore(二)
一步步打造一个简单的 MVC 电商网站 - BooksStore(二) 本系列的 GitHub地址:https://github.com/liqingwen2015/Wen.BooksStore 前: ...
- [.NET] 一步步打造一个简单的 MVC 电商网站 - BooksStore(三)
一步步打造一个简单的 MVC 电商网站 - BooksStore(三) 本系列的 GitHub地址:https://github.com/liqingwen2015/Wen.BooksStore &l ...
- [.NET] 一步步打造一个简单的 MVC 电商网站 - BooksStore(四)
一步步打造一个简单的 MVC 电商网站 - BooksStore(四) 本系列的 GitHub地址:https://github.com/liqingwen2015/Wen.BooksStore &l ...
- [.NET] 一步步打造一个简单的 MVC 电商网站 - BooksStore(一)
一步步打造一个简单的 MVC 电商网站 - BooksStore(一) 本系列的 GitHub地址:https://github.com/liqingwen2015/Wen.BooksStore &l ...
- [.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 ...
随机推荐
- 18.match_phrase的用法
主要知识点: match_phrase的使用场景 match_phrase的用法 match_phrase的原理 一.什么是近似匹配 match_phrase的使用场景 现假设有两个句子 ...
- net Core 中定时任务的设置
接下来的任务 采用定时任务的需求场景: 每天的数据整理,比如库存,每天的零散数据的统计,定时提醒,定时提醒到期未完成的任务-.... 1.采用的第三方类库: quartz 2文档地址:http://w ...
- bx值
bx值 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 262144/262144 K (Java/Others) Problem De ...
- Entity Framework Connection String不保留密码的方法
添加Entity Data Model的时候,到最后一步,有两个radio box: 如果选择include sensitive data,虽然很方便,但是在web.config或者app.confi ...
- [Poj2112][USACO2003 US OPEN] Optimal Milking [网络流,最大流][Dinic+当前弧优化]
题意:有K个挤奶机编号1~K,有C只奶牛编号(K+1)~(C+K),每个挤奶机之多能挤M头牛,现在让奶牛走到挤奶机处,求奶牛所走的最长的一条边至少是多少. 题解:从起点向挤奶机连边,容量为M,从挤奶机 ...
- OpenCV使用GPU
在使用OpenCV2.4.x的时候,以为不用重新编译可以直接使用GPU模块,不过在我使用的时候,发现使用getCudaEnabledDeviceCount()的时候,总是获得是0,于是重新编译Open ...
- 大学,助你成长or 让你堕落?
不管是论坛.贴吧.还是博客,都或多或少能够看到诸如对大学教育的反思.抨击之类的文章.至于什么是大学,大学又该怎样度过.大学是助你成长还是让你堕落了?我想这应该是一个见仁见智的问题.作为一个过来人,结合 ...
- crm使用soap启用和停用记录
function demo() { //操作记录的id var targetId = "a8a46444-ba10-e411-8a04-00155d002f02"; ...
- 回调函数实现类似QT中信号机制(最简单)
1. 定义回调接口类: class UIcallBack{public: virtual void onAppActivated() = 0; virtual void onShowMore() = ...
- hdu 1213(并查集模版题)
How Many Tables Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)T ...