CodePen

HTML

            
              <div class="compass"></div>


            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              body{background: linear-gradient(to top, white,  slategray);}

.compass,
.compass:before{
  width: 650px;
  height: 650px;
  background:
    linear-gradient(45deg, #ccc 50%, #444 50%) no-repeat 275px 275px,
    linear-gradient(-45deg, #444 50%, #ccc 50%) no-repeat 325px 275px,
    linear-gradient(45deg, #444 50%, #ccc 50%) no-repeat 325px 325px,
    linear-gradient(-45deg, #ccc 50%, #444 50%) no-repeat 275px 325px,
    /*ponta superior*/
    linear-gradient(-80deg, #444 50%, transparent 51%) no-repeat  275px 0,
    linear-gradient(80deg, #ccc 50%, transparent 51%) no-repeat  325px 0,
   /*ponta inferior*/
    linear-gradient(80deg, transparent 49%, #ccc 50%) no-repeat  275px 375px,
    linear-gradient(-80deg, transparent 49%, #444 50%) no-repeat  325px 375px,
    /*ponta lateral-esq*/
    linear-gradient(-10deg, #ccc 51%, transparent 51%) no-repeat  0 275px,
    linear-gradient(10deg, transparent 49%, #444 45%) no-repeat  0 325px,
    /*ponta lateral-dir*/
    linear-gradient(10deg, #444 51%, transparent 51%) no-repeat  375px 275px,
    linear-gradient(-10deg, transparent 49%, #ccc 51%) no-repeat  375px 325px
    ;

  background-size: 
    50px 50px, 50px 50px, 
    50px 50px, 50px 50px, 
    50px 275px, 50px 275px,
    50px 275px, 50px 275px,
    275px 50px, 275px 50px,
    275px 50px, 275px 50px
    ;
}


div{
  position: relative;
  margin:10% auto;
}

div:before{
  content:'';
  position: absolute;
  z-index: -1;
  -webkit-transform:rotate(46deg) scale(.8);
  -moz-transform:rotate(46deg) scale(.8);
  transform:rotate(46deg) scale(.8);
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

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