<div class="circle">
  
  <div class="sun"></div>
  
  <div class="mount"></div>
  <div class="mount"></div>
  <div class="mount"></div>
  
</div>
@import "compass/css3";

$color-1: #E45454;
$color-2: darken(#C92121, 8%);

$color-3: #3E3A43;
$color-4: darken(#201F26, 8%);

$color-5: #ECB16F;
$color-6: darken(#EB9544, 8%);

$size: 448px;
$sun-size: 80px;

$mount-height: 380px;
$mount-width: 260px;

$red-gradient: linear-gradient(to bottom, $color-1, $color-2);
$onyx-gradient: linear-gradient(to bottom, $color-3, $color-4);
$yellow-gradient: linear-gradient(to bottom, $color-5, $color-6);

.circle, 
.sun{
  border-radius: 100%;
}

.circle{
  width: $size;
  height: $size;
  background: $red-gradient;
  
  border: 10px solid #fff;
  box-shadow: 0 0 0 3px $color-3;

  position: absolute; 
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  overflow: hidden;


  .sun{
    width: $sun-size;
    height: $sun-size;
    background: $yellow-gradient;
    position: absolute;
    left: 62px;
    top: 185px;
  }

  .mount{
    height: $mount-height;
    width: $mount-width;
    background: $onyx-gradient;
    transform: rotate(45deg);
    position: absolute;
    top: 145px;
    left: -90px;
    right: 0;
    margin: auto;
    box-shadow: inset -94px 0px 60px rgba(black, .4);

    &:nth-child(2){
      top: 224px;
      left: -410px; 
      box-shadow: inset -215px 0px 60px rgba(0, 0, 0, 0.4);
    }
    &:nth-child(4){
      top: 224px;
      left: 210px; 
    }
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.