python关于七巧板的代码_Css打造一个简单的静态七巧板

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

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

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

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

html代码：

Css打造一个静态七巧板

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);

}

python关于七巧板的代码_Css打造一个简单的静态七巧板相关推荐

Css打造一个简单的静态七巧板
偶然在微博上看到用css写一个七巧板,正好也有一些源代码,于是就试着敲了敲. 主要是利用了css3的transform,实现平移,旋转,变形,直接用看到的代码敲出来之后有些问题,因为宽度上下面绿色的三 ...
python程序30行_30行Python代码，打造一个简单的微信群聊助手，简单方便
大家都知道,最近代码君迷上了Python,一直在研究这门语言,还是那句话,人生苦短,我学Python,今天代码君要教大家一个黑科技,30行代码实现自己定制的微信群聊助手,这个助手有什么用呐,就是用来活 ...
python社区微信群_30行Python代码，打造一个简单的微信群聊助手，简单方便
大家都知道,最近代码君迷上了Python,一直在研究这门语言,还是那句话,人生苦短,我学Python,今天代码君要教大家一个黑科技,30行代码实现自己定制的微信群聊助手,这个助手有什么用呐,就是用来活 ...
用CSS和JS打造一个简单的图片编辑器
用CSS和JS打造一个简单的图片编辑器,本文主要是利用CSS的filter和简单的Jquery代码来实现一个简单的图片编辑器,包括对图片的透明度,黑白,图片亮度等调节. CSS filter 我们首先 ...
Python开发第一步：如何制作一个简单的桌面应用
Python开发第一步:如何制作一个简单的桌面应用前言大家好,我是baifagg, 一个热爱Python的编程爱好者. 今天我们来学习一下, 如何用Python制作一个简单的桌面应用程序. 虽然桌 ...
python写rest服务_Python 如何创建一个简单的REST接口
问题你想使用一个简单的REST接口通过网络远程控制或访问你的应用程序,但是你又不想自己去安装一个完整的web框架. 解决方案构建一个REST风格的接口最简单的方法是创建一个基于WSGI标准(PEP ...
python爬虫入门教程(二)：开始一个简单的爬虫
2019/10/28更新使用Python3,而不再是Python2 转载请注明出处:https://blog.csdn.net/aaronjny/article/details/77945329 爬 ...
python小项目实例流程-Python小项目：快速开发出一个简单的学生管理系统
原标题:Python小项目:快速开发出一个简单的学生管理系统本文根据实际项目中的一部分api 设计抽象出来,实例化成一个简单小例子,暂且叫作「学生管理系统」. 这个系统主要完成下面增删改查的功能: ...
python小项目案例-Python小项目：快速开发出一个简单的学生管理系统
本文根据实际项目中的一部分api 设计抽象出来,实例化成一个简单小例子,暂且叫作「学生管理系统」. 这个系统主要完成下面增删改查的功能: 包括: 学校信息的管理教师信息的管理学生信息的管理根据A ...

python关于七巧板的代码_Css打造一个简单的静态七巧板

python关于七巧板的代码_Css打造一个简单的静态七巧板相关推荐

最新文章

热门文章