偶然在微博上看到用css寫一個七巧板，正好也有一些源代碼，于是就試著敲了敲。

主要是利用了css3的transform，實現平移，旋轉，變形，直接用看到的代碼敲出來之后有些問題，因為寬度上下面綠色的三角形和右邊藍色的三角形沒有做限制，所以我做出來看到的效果是這樣的：

之后自己做了稍微的調整，調整之后的效果是這樣的：

這里直接將板子的位置放在了瀏覽器的左上角，利用了border-top和border-right來進行位置的控制，下面是代碼：

html代碼：

Css打造一個靜態七巧板

Css代碼：

.warp{

position: relative;

width: 300px;

height: 400px;

}

.t{

position: absolute;

top: 0;

left: 0;

right: 0;

bottom: 0;

transform-origin:0 0;

}

.t1{

border-top: 212px solid red;

border-right: 212px solid transparent;

transform:translate(150px,150px) rotate(-135deg);

}

.t2{

border-top: 212px solid #FADF17;

border-right: 212px solid transparent;

transform:translate(150px,150px) rotate(135deg);

}

.t3{

width: 106px;

height: 106px;

background: #C96798;

border-left: 0px solid transparent;

transform:translate(150px,150px) rotate(45deg);

}

.t4{

width: 106px;

border-top: 106px solid #00bdd0;

border-right: 106px solid transparent;

transform:translate(150px,150px) rotate(-45deg);

}

.t5{

width: 0px;

border-top: 106px solid #5dbe79;

border-right: 106px solid transparent;

transform:translate(75px,225px) rotate(45deg);

}

.t6{

width: 150px;

height: 75px;

transform:translate(300px) rotate(90deg) skew(45deg);

background: #ffdd01;

}

.t7{

width: 0px;

border-top: 150px solid #0117bf;

border-right: 150px solid transparent;

transform:translate(300px,300px) rotate(180deg);

}

總結

以上是生活随笔為你收集整理的python关于七巧板的代码_Css打造一个简单的静态七巧板的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。