CodePen

HTML

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

↑ Insert the most common viewport meta tag

CSS

            
              /**
 *  shuriken only one div! (works only in webkit)
 */

html{font-size:10px;}

body{font-size:3em;}

.shuriken{
	position:relative;
	width:2.2em;		
	height:2.2em;
	margin:25% auto;
	background:white;
	border-radius:50%;
	box-shadow: inset 0 0 0 .8em black,
	8em 0 0 -.8em white,
	8em .06em 0 .25em black,
	
	-8em 0 0 -.8em white,
	-8em 0 0 -.2em black;
	
	/*-webkit-animation: foo 2s linear infinite;*/
}

.shuriken:after{
	position:absolute;
	top:1.6em;
	left:0;
	content:"";
	width:0;		
	height:0;
	border:solid 1.1em transparent;
	border-top:solid 2.2em black;
	border-radius:50%;
	-webkit-box-reflect: above 1em;
	-webkit-filter:drop-shadow(-8em 0 0 black)
	drop-shadow(8em 0 0 black)

}

.shuriken:before{
	position:absolute;
	top:0;
	left:1.6em;
	content:"";
	width:0;		
	height:0;
	border:solid 1.15em transparent;
	border-left:solid 2.2em black;
	border-radius:50%;
	-webkit-box-reflect: left 1em;
	-webkit-filter:drop-shadow(8em 0 0 black)
	drop-shadow(-8em 0 0 black);

}

@-webkit-keyframes foo{

  to{
   -webkit-transform:rotate(360deg);
  }
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

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