<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>
.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); }