纯CSS3打造七巧板

七巧板的由来

先来个科普吧，是我在查资料过程中看到的，感觉很有意思。

宋朝有个叫黄伯思的人，对几何图形很有研究，他热情好客，发明了一种用6张小桌子组成的[宴几]——请客吃饭的小桌子。后来有人把它改进为7张桌组成的宴几，可以根据吃饭人数的不同，把桌子拼成不同的形状，比如3人拼成三角形，4人拼成四方形，6人拼成六方形……这样用餐时人人方便，气氛更好。后来，有人把宴几缩小改变到只有七块板，用它拼图，演变成一种玩具。

因为它十分巧妙好玩，所以人们叫它[七巧板]。

今天，在世界上几乎没有人不知道七巧板和七巧图，它在国外被称为[唐图]（Tangram），意思是来自中国的拼图（不是唐代发明的图）。

纳尼，原来Tangram是咱们中国的，。。。

方案

看完了有趣的东西，该开始正题了，就是无论使用什么技术给我整出个七巧板来。。。（在前端页面里）

结合自己的知识体系，思考了下大概的思路：

Canvas，万能的Cavans一定可以解决问题，加上之前做过Painter。灵活性+扩展性满足。 CSS3，每个版子是一个dom元素，然后使用css3搞定。灵活性 扩展性不如canvas。 svg，这个应该也可以吧，但自己对这方面的知识匮乏。 。。。暂时未想出。

考虑到时间成本（太紧了）和其他。。。原因，决定使用css3的方案。

开始想板子使用图片来做，但多亏自己以前写过一篇‘用CSS代码写出的各种形状图形的方法’，里面收录了使用CSS3制作20种图形的方法，有兴趣的同学可以看下，查了下可以满足所需的7种板子的形状。

用到属性

transform translation

技术验证

开始之前先要验证下，所要用到的CSS3是否可以兼容所要需平台，这多亏http://caniuse.com/。

因为我要运行在移动端，查了下要用到的css3属性，在安卓2.3以上都支持，但需加前缀，所以可以放心使用。

编码实现

首先我们需要一个容器和起个元素用来表示七块板子。

查看更多关于纯CSS3打造七巧板的详细内容...