HTML绘制七巧板,如何使用HTML5 CSS3制作简单七巧板

今天来分享一个制作简单七巧板的方法(图片如图)：

代码如下：

首先在body中间写四个div，在对其设置样式如下：

这是对body中的div的样式设置

#box1{

width: 0px;

height:0px;

border-top:140px solid rgb(199,233,125);

border-left:140px solid rgb(91,192,209);

border-right:140px solid red;

border-bottom:140px solid purple;

}

#box2{

width: 0px;

height:0px;

border-bottom:70px solid transparent;

border-right:70px solid yellow;

border-top:70px solid transparent;

border-left:70px solid transparent;

position: absolute;

top: 78px;

left:78px;

}

#box3{

width: 0px;

height:0px;

border-bottom:70px solid pink;

border-right:70px solid transparent;

border-top:70px solid transparent;

border-left:70px solid transparent;

position: absolute;

top: 148px;

left:8px;

}

#box4{

width: 0px;

height:0px;

border-bottom:70px solid rgb(250,204,70);

border-right:70px solid rgb(250,204,70);

border-top:70px solid transparent;

border-left:70px solid transparent;

position: absolute;

top: 148px;

left:148px;

}

思路：通过border属性制作一个四色正方形，在分别用border画出相应的图形，然后用定位(position)来调整元素的位置以来达到七巧板的效果，这方法是取巧做出的，也可以直接画出，这个下次说。