CodePen

HTML

            
              <div class="color"></div>
            
          
!

CSS

            
              @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;
.color {
  @include circle($wheel);
  clip: rect(0, $wheel, $wheel, #{$wheel/2});
  background: red;
  &:after {
    @include circle($wheel);
    clip: rect(0, #{$wheel/2}, $wheel, 0);
    background: blue;
    transform:rotate(45deg);
  }
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              /* 
  See more in http://css-tricks.com/conical-gradients-css/ 
*/
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................