HTML
<div class="circu">
  
  <div class="luna">
  </div>
  <div class="trian"><span class="tri"></span></div>
  <div class="trian3"><span class="tri3"></span></div>
  <div class="trian5"><span class="tri5"></span></div>
  <ul>
     <li></li>
    <li></li>
    <li></li>
     <li></li>
    <li></li>
    <li></li>
     <li></li>
    
  </ul>
</div>
body{
  background:#241e2a;
}
.circu{
  position:relative;
  width:500px;
  height:500px;
  border-radius:100%;
  border:9px solid #292136;
  background:#130c21;
  margin:121px auto;
overflow:hidden;}
.luna{
  position:absolute;
  width:333px;
  height:333px;
  border-radius:100%;
  background: rgba(251,51,94,1);
background: -moz-radial-gradient(center, ellipse cover, rgba(251,51,94,1) 25%, rgba(175,45,78,1) 27%, rgba(175,50,77,1) 43%, rgba(97,33,59,1) 44%, rgba(97,33,59,1) 44%, rgba(97,33,59,1) 59%, rgba(66,20,55,1) 59%, rgba(64,33,57,1) 75%, rgba(50,32,51,1) 76%, rgba(50,32,51,1) 99%, rgba(50,32,51,1) 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(25%, rgba(251,51,94,1)), color-stop(27%, rgba(175,45,78,1)), color-stop(43%, rgba(175,50,77,1)), color-stop(44%, rgba(97,33,59,1)), color-stop(44%, rgba(97,33,59,1)), color-stop(59%, rgba(97,33,59,1)), color-stop(59%, rgba(66,20,55,1)), color-stop(75%, rgba(64,33,57,1)), color-stop(76%, rgba(50,32,51,1)), color-stop(99%, rgba(50,32,51,1)), color-stop(100%, rgba(50,32,51,1)));
background: -webkit-radial-gradient(center, ellipse cover, rgba(251,51,94,1) 25%, rgba(175,45,78,1) 27%, rgba(175,50,77,1) 43%, rgba(97,33,59,1) 44%, rgba(97,33,59,1) 44%, rgba(97,33,59,1) 59%, rgba(66,20,55,1) 59%, rgba(64,33,57,1) 75%, rgba(50,32,51,1) 76%, rgba(50,32,51,1) 99%, rgba(50,32,51,1) 100%);
background: -o-radial-gradient(center, ellipse cover, rgba(251,51,94,1) 25%, rgba(175,45,78,1) 27%, rgba(175,50,77,1) 43%, rgba(97,33,59,1) 44%, rgba(97,33,59,1) 44%, rgba(97,33,59,1) 59%, rgba(66,20,55,1) 59%, rgba(64,33,57,1) 75%, rgba(50,32,51,1) 76%, rgba(50,32,51,1) 99%, rgba(50,32,51,1) 100%);
background: -ms-radial-gradient(center, ellipse cover, rgba(251,51,94,1) 25%, rgba(175,45,78,1) 27%, rgba(175,50,77,1) 43%, rgba(97,33,59,1) 44%, rgba(97,33,59,1) 44%, rgba(97,33,59,1) 59%, rgba(66,20,55,1) 59%, rgba(64,33,57,1) 75%, rgba(50,32,51,1) 76%, rgba(50,32,51,1) 99%, rgba(50,32,51,1) 100%);
background: radial-gradient(ellipse at center, rgba(251,51,94,1) 25%, rgba(175,45,78,1) 27%, rgba(175,50,77,1) 43%, rgba(97,33,59,1) 44%, rgba(97,33,59,1) 44%, rgba(97,33,59,1) 59%, rgba(66,20,55,1) 59%, rgba(64,33,57,1) 75%, rgba(50,32,51,1) 76%, rgba(50,32,51,1) 99%, rgba(50,32,51,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fb335e', endColorstr='#322033', GradientType=1 );
  margin:35px 85px;
}
.trian{
  position:absolute;
   width: 0;
    height: 0;
    border-bottom: 172px solid #ff3360;
    border-left: 102px solid transparent;
  margin:212px 80px
}
.trian::before{
  content:"";
  display:block;
  width: 0;
   height: 0;
   border-bottom: 172px solid #c21749;
   border-right: 102px solid transparent;
}
.trian::after{
  content:"";
  display:block;
  width: 0;
    height: 0;
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;
    border-bottom: 40px solid #421b2b;
  margin:-172px -25px;
}
.trian3{
  position:absolute;
   width: 0;
    height: 0;
    border-bottom: 152px solid #ff3360;
    border-left: 80px solid transparent;
  margin:231px 162px
}
.trian3::before{
  content:"";
  display:block;
  width: 0;
   height: 0;
   border-bottom: 152px solid #c21749;
   border-right: 80px solid transparent;
}
.trian3::after{
  content:"";
  display:block;
  width: 0;
    height: 0;
    border-left: 21px solid transparent;
    border-right: 21px solid transparent;
    border-bottom: 40px solid #421b2b;
  margin:-152px -21px;
}
.trian5{
  position:absolute;
   width: 0;
    height: 0;
    border-bottom: 192px solid #ff3360;
    border-left: 102px solid transparent;
  margin:192px 212px
}
.trian5::before{
  content:"";
  display:block;
  width: 0;
   height: 0;
   border-bottom: 192px solid #c21749;
   border-right: 102px solid transparent;
}
.trian5::after{
  content:"";
  display:block;
  width: 0;
    height: 0;
    border-left: 24px solid transparent;
    border-right: 24px solid transparent;
    border-bottom: 40px solid #421b2b;
  margin:-192px -25px;
}
.tri{
  position:absolute;
  width: 0;
    height: 0;
    border-bottom: 40px solid #5e363d;
    border-left: 24px solid transparent;
  margin:-172px -25px
}
.tri3{
  position:absolute;
  width: 0;
    height: 0;
    border-bottom: 40px solid #5e363d;
    border-left: 21px solid transparent;
  margin:-152px -21px
}
.tri5{
  position:absolute;
  width: 0;
    height: 0;
    border-bottom: 40px solid #5e363d;
    border-left: 24px solid transparent;
  margin:-192px -25px
}
ul{
  position:absolute;
  width:450px;
  height:132px;
  list-style:none;
 
  margin:373px 30px
}
ul li{

  display:block;
  width:450px;
  height:21px;
  border-radius: 12px 0 0 12px;
  background:#321334;
 margin:0;
}
ul li:nth-child(1){
  margin-left:-12px;
}
ul li:nth-child(1)::before{
  content:"";
  position:absolute;
  display:block;
  width:90px;
  height:3px;
  background:#621749;
 margin:9px 90px;
}
ul li:nth-child(1)::after{
  content:"";
  position:absolute;
  display:block;
  width:121px;
  height:3px;
  background:#621749;
 margin:9px 231px;
}
ul li:nth-child(2){
  margin-left:21px;
}
ul li:nth-child(2)::before{
  content:"";
  position:absolute;
  display:block;
  width:192px;
  height:3px;
  background:#621749;
  margin:7px 7px;
}
ul li:nth-child(2)::after{
  content:"";
  position:absolute;
  display:block;
  width:70px;
  height:3px;
  background:#621749;
  margin:7px 231px;
}
ul li:nth-child(3){
  margin-left:12px;
}
ul li:nth-child(3)::before{
  content:"";
  position:absolute;
  display:block;
  width:112px;
  height:3px;
  background:#621749;
  margin:9px 70px;
}
ul li:nth-child(3)::after{
  content:"";
  position:absolute;
  display:block;
  width:121px;
  height:3px;
  background:#621749;
  margin:7px 231px;
}
ul li:nth-child(4){
  margin-left:43px;
}
ul li:nth-child(4)::before{
  content:"";
  position:absolute;
  display:block;
  width:90px;
  height:3px;
  background:#621749;
 margin:9px 90px;
}
ul li:nth-child(4)::after{
  content:"";
  position:absolute;
  display:block;
  width:121px;
  height:3px;
  background:#621749;
 margin:9px 231px;
}
ul li:nth-child(5){
  margin-left:50px;
}
ul li:nth-child(5)::before{
  content:"";
  position:absolute;
  display:block;
  width:231px;
  height:3px;
  background:#621749;
 margin:7px 12px;
}
ul li:nth-child(5)::after{
  content:"";
  position:absolute;
  display:block;
  width:70px;
  height:3px;
  background:#621749;
 margin:7px 300px;
}
ul li:nth-child(6){
  margin-left:70px;
}
ul li:nth-child(6)::before{
  content:"";
  position:absolute;
  display:block;
  width:132px;
  height:3px;
  background:#621749;
  margin:7px 30px;
}
ul li:nth-child(6)::after{
  content:"";
  position:absolute;
  display:block;
  width:70px;
  height:3px;
  background:#621749;
  margin:7px 231px;
}
JavaScript

				

Recently Added

Social Icons

SCSS social icon with hover effect and active state.

Loader

SCSS loader fade in and fade out.

Keyboard

CSS keyboard with beautiful color and effect.

Randomize

Showing random numbers mixed up.

Buttons

Buttons with beautiful hover effect.

Glass Effect

Beautiful glass effect with css.

Clip Animation

Creating clip animation with css.

Google Icons

Google logos with css.

Abstract Art

Abstract art with pure css. Combination of shapes created with css.