今天來分享一個(gè)制作簡(jiǎn)單七巧板的方法（圖片如圖）：
代碼如下：
首先在body中間寫四個(gè)div，在對(duì)其設(shè)置樣式如下：
這是對(duì)body中的div的樣式設(shè)置
#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屬性制作一個(gè)四色正方形，在分別用border畫出相應(yīng)的圖形，然后用定位（position）來調(diào)整元素的位置以來達(dá)到七巧板的效果，這方法是取巧做出的，也可以直接畫出，這個(gè)下次說。
