七巧板

纯CSS3制作七巧板

HTML

<div class="wrap">
    <div class="t t1 t11"></div>
    <div class="t t2 t22"></div>
    <div class="t t3 t33"></div>
    <div class="t t4 t44"></div>
    <div class="t t5 t55"></div>
    <div class="t t6 t66"></div>
    <div class="t t7 t77"></div>
</div>

CSS

.wrap{
    position: relative;
    width:300px;
    height: 400px;
}
.t{
    position: absolute;
    top:0;
    left:0;
    width: 0;
    height: 0;
    transform-origin:0 0;
}
.t1{
    
    border-top: 212.13203435596425732025330863145px solid red; 
    border-right: 212.13203435596425732025330863145px solid transparent;
    transform: translate(150px, 150px) rotate(-135deg);
}
.t2{
    border-top: 212.13203435596425732025330863145px solid #fdaf17; 
    border-right: 212.13203435596425732025330863145px solid transparent;
    transform: translate(150px, 150px) rotate(135deg);
}
.t3{
    width: 106.06601717798212866012665431573px;
    height: 106.06601717798212866012665431573px;
    background: #c3d946;
    transform: translate(150px,150px) rotate(45deg);
}
.t4{
    border-top: 106.06601717798212866012665431573px solid #00bdd0; 
    border-right: 106.06601717798212866012665431573px solid transparent;
    transform: translate(150px,150px) rotate(-45deg);
}
.t5{
    border-top: 106.06601717798212866012665431573px solid #5dbe79; 
    border-right: 106.06601717798212866012665431573px solid transparent;
    transform: translate(75px,225px) rotate(45deg);
}
.t6{
    width: 150px;
    height: 75px;
    transform: translate(300px) rotate(90deg) skew(45deg);
    background: #ffdd01;
}
.t7{
    border-top: 150px solid #0177bf; 
    border-right: 150px solid transparent;
    transform: translate(300px,300px) rotate(180deg);
}