CSS Sun Icons

CSS Sun Icons

HTML
<div class="sun">
  <div class="sun-top"></div> 
  <div class="sun-right"></div>
  <div class="sun-bottom"></div>
  <div class="sun-left"></div>
</div>
CSS
.sun{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  background: #fcd462;
  box-shadow: inset -15px 0px #f6c458;
  width: 150px;
  height: 150px;
  border-radius: 50%;
}
 
.sun-top{
  background:  #f6c458;
  width: 25px;
  height: 50px;
  border-radius: 20px;
  position: absolute;
  top: -70px;
  left: 50%;
  transform: translateX(-50%);
}

.sun-bottom{
  background:  #f6c458;
  width: 25px;
  height: 50px;
  border-radius: 20px;
  position: absolute;
  bottom: -70px;
  left: 50%;
  transform: translateX(-50%);
}

.sun-right{
  background:  #f6c458;
  width: 25px;
  height: 50px;
  border-radius: 20px;
  position: absolute;
  right: -70px;
  top: 50%;
  transform: translateY(-50%) rotate(90deg);
}

.sun-left{
  background:  #f6c458;
  width: 25px;
  height: 50px;
  border-radius: 20px;
  position: absolute;
  left: -70px;
  top: 50%;
  transform: translateY(-50%) rotate(90deg);
}

DEMO

View Demo
1,114 Views
64750cookie-checkCSS Sun Icons

Leave a Reply

Your email address will not be published. Required fields are marked *