偶然在微博上看到用css写一个七巧板,正好也有一些源代码,于是就试着敲了敲. 主要是利用了css3的transform,实现平移,旋转,变形,直接用看到的代码敲出来之后有些问题,因为宽度上下面绿色的三角形和右边蓝色的三角形没有做限制,所以我做出来看到的效果是这样的: 之后自己做了稍微的调整,调整之后的效果是这样的: 这里直接将板子的位置放在了浏览器的左上角,利用了border-top和border-right来进行位置的控制,下面是代码: html代码: <!DOCTYPE html> <…