HTML
<div class="wheel">
<ul class="umbrella">
<li class="color"></li>
<li class="color"></li>
<li class="color"></li>
<li class="color"></li>
<li class="color"></li>
<li class="color"></li>
<li class="color"></li>
<li class="color"></li>
<li class="color"></li>
<li class="color"></li>
<li class="color"></li>
<li class="color"></li>
</ul>
</div>
SCSS
@import "compass/css3";
@mixin circle($size) {
content: "";
position: absolute;
border-radius: 50%;
left: calc(50% - #{$size/2});
top: calc(50% - #{$size/2});
width: $size;
height: $size;
}
$wheel: 15em;
.wheel, .umbrella, .color {
@include circle($wheel);
}
.wheel {
overflow: hidden;
width: $wheel;
height: $wheel;
position: relative;
}
.umbrella {
position: relative;
-webkit-filter: blur(1.7em);
-webkit-transform: scale(1.35);
}
.color, .color:nth-child(n+7):after {
clip: rect(0, $wheel, $wheel, #{$wheel/2});
}
.color:after, .color:nth-child(n+7) {
@include circle($wheel);
clip: rect(0, #{$wheel/2}, $wheel, 0);
}
$colors: (#9ED110, #50B517, #179067, #476EAF, #9f49ac, #CC42A2, #FF3BA7, #FF5800, #FF8100, #FEAC00, #FFCC00, #EDE604);
@for $i from 0 to length($colors) {
.color:nth-child(#{1+$i}):after {
background-color: nth($colors, $i+1);
@if $i < 6 {
transform: rotate(#{30*(1+$i)}deg);
z-index: #{length($colors)-$i};
} @else {
transform: rotate(#{-30+(30*(1+$i))}deg);
}
}
}
body {
background: #f2f2f2;
padding: 50px;
}
