今天来分享一个制作简单七巧板的方法（图片如图）：
代码如下：
首先在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）来调整元素的位置以来达到七巧板的效果，这方法是取巧做出的，也可以直接画出，这个下次说。
网友评论