css
body{
padding: 0;
margin: 0;
background:#232323;
}
.box{
position: relative;
margin: auto;
display: block;
margin-top: 8%;
width: 600px;
height: 420px;
background: none;
}
.part-1, .part-2, .part-3, .part-4, .part-5, .part-6, .part-7, .part-8, .part-9,
.part-10, .part-11, .part-12, .part-13, .part-14, .part-15, .part-16, .part-17,
.part-18{
position: absolute;
width: 50%;
height: 25%;
left: 25%;
bottom: 37.5%;
border-radius: 100% 4px;
opacity: 0.5;
}
.part-1{
background: #fffe33;
transform: rotate(0deg);
}
.part-2{
background: #feff00;
transform: rotate(-10deg);
}
.part-3{
background: #ff9935;
transform: rotate(-20deg);
}
.part-4{
background: #f87e07;
transform: rotate(-30deg);
}
.part-5{
background: #ff339c;
transform: rotate(-40deg);
}
.part-6{
background: #ff007e;
transform: rotate(-50deg);
}
.part-7{
background: #ff34ff;
transform: rotate(-60deg);
}
.part-8{
background: #ff00ff;
transform: rotate(-70deg);
}
.part-9{
background: #9a34ff;
transform: rotate(-80deg);
}
.part-10{
background: #7f00ff;
transform: rotate(-90deg);
}
.part-11{
background: #3233ff;
transform: rotate(-100deg);
}
.part-12{
background: #0000fe;
transform: rotate(-110deg);
}
.part-13{
background: #3399fe;
transform: rotate(-120deg);
}
.part-14{
background: #0978f5;
transform: rotate(-130deg);
}
.part-15{
background: #33fffe;
transform: rotate(-140deg);
}
.part-16{
background: #32ff98;
transform: rotate(-150deg);
}
.part-17{
background: #99ff32;
transform: rotate(-160deg);
}
.part-18{
background: #81fe00;
transform: rotate(-170deg);
}