CodePen

HTML

            
              <div class="wheel">
  <div class="umbrella">
    <div class="quarter"></div>
    <div class="quarter"></div>
    <div class="quarter"></div>
    <div class="quarter"></div>
  </div>
</div>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              @function strip-units($number) {
  @return $number / ($number * 0 + 1);
}

$size: 100px;

.wheel {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -$size/2;
  width: $size;
  height: $size;
  overflow: hidden;
  -moz-transform: scale(2);
  -webkit-transform: scale(2);
}
/* A crude mask, because the compositor does not
 * support clipping with border-radius. One alternative
 * would be SVG masks. Too lazy though. */
.wheel:before {
  content: "";
  position: absolute;
  top: -$size;
  left: -$size;
  right: -$size;
  bottom: -$size;
  border: $size solid #fff;
  border-radius: 50%;
  z-index: 1;
}
.umbrella {
  position: absolute;
  top: $size/20;
  width: $size;
  height: $size;
  -moz-perspective: $size/4;
  -moz-perspective-origin: $size/2 $size/4;
  -moz-transform: scale(.2);
  -webkit-perspective: $size/4;
  -webkit-perspective-origin: $size/2 $size/4;
  -webkit-transform: scale(.2);
}
  .quarter {
    position: absolute;
    overflow: hidden;
    width: $size/2;
    height: $size/2;
    -moz-transform-origin: $size/2 $size/4;
    -webkit-transform-origin: $size/2 $size/4;
  }
  .quarter:nth-child(1) {
    -moz-transform: scale(strip-units($size)/2000) rotateY(45deg);
    -webkit-transform: scale(strip-units($size)/2000) rotateY(45deg);
    background: linear-gradient(to bottom, #9ED110 0%, #50B517 33.33%, #179067 66.67%, #476EAF 100%);
  }
  .quarter:nth-child(2) {
    -moz-transform: scale(strip-units($size)/2000) rotateZ(-90deg) rotateY(45deg);
    -webkit-transform: scale(strip-units($size)/2000) rotateZ(-90deg) rotateY(45deg);
    background: linear-gradient(to bottom, #476EAF 0%, #9f49ac 33.33%, #CC42A2 66.67%, #FF3BA7 100%);
  }
  .quarter:nth-child(3) {
    -moz-transform: scale(strip-units($size)/2000) rotateZ(-180deg) rotateY(45deg);
    -webkit-transform: scale(strip-units($size)/2000) rotateZ(-180deg) rotateY(45deg);
    background: linear-gradient(to bottom, #FF3BA7 0%, #FF5800 33.33%, #FF8100 66.67%, #FEAC00 100%);
  }
  .quarter:nth-child(4) {
    -moz-transform: scale(strip-units($size)/2000) rotateZ(-270deg) rotateY(45deg);
    -webkit-transform: scale(strip-units($size)/2000) rotateZ(-270deg) rotateY(45deg);
    background: linear-gradient(to bottom, #FEAC00 0%, #FFCC00 33.33%, #EDE604 66.67%, #9ED110 100%);
  }

            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................