CodePen

HTML

            
              <div class="container">
  <div class="left">
    <strong>Original image:</strong>
<img src="http://media.downforceco.com/2012/11/DFCOlogo.jpg" />
    </div>
<div class="right">
  <strong>CSS only version:</strong>
<div class="dfco">
    <ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul>
    <div class="inner">
      <h1>
        <span>D</span>
        <span>F</span>
        <span>C</span>
        <span>O</span>
      </h1>      
      <h2>
        <span>D</span>
        <span>o</span>
        <span>w</span>
        <span>n</span>
        <span>f</span>
        <span>o</span>
        <span>r</span>
        <span>c</span>
        <span>e</span>
      </h2>
      <h3>
        <span>C</span>
        <span>l</span>
        <span>o</span>
        <span>t</span>
        <span>h</span>
        <span>i</span>
        <span>n</span>
        <span>g</span>
        <span>&nbsp;</span>
        <span>c</span>
        <span>o</span>
        <span>.</span>
      </h3>
    </div>
</div>
  </div>
</div>
            
          
!
via HTML Inspector

CSS

            
              @import url(http://fonts.googleapis.com/css?family=Cutive+Mono);
.container {
  width: 550px;
  margin: 20px auto;
}
.container .left,
.container .right {
  float: left;
  width: 50%;
  text-align: center;
}
.container strong {
  font-family: 'Cutive Mono', serif;
  font-size: 18px;
}
.dfco {
  opacity: 1;
  width: 208px;
  height: 208px;
  position: relative;
  top: 5px;
  margin: 0 auto;
}
.dfco ul {
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
  top: 10px;
  left: 28px;
}
.dfco li {
  display: block;
  width: 154px;
  height: 154px;
  background: #000;
  position: absolute;  
  border-radius: 6px;  
  opacity: 1;
  top: 20px;
}
.dfco .inner {
  position: absolute;
  left: 9px;
  top: 12px;
  opacity: 1;
  width: 191px;
  height: 191px;
  border-radius: 50%;
  box-shadow:
    0 0 0 3px #FFF inset,
    0 0 0 6px #000 inset,
    0 0 0 8px #FFF inset,
    0 0 0 100px #000 inset;
}
.dfco h1 {
  text-align: left;
  width: 100px;
  height: 100px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -50px 0 0 -50px;
  font-weight: bold;
  color: #FFF;
  transform: rotate(45deg);
}
h1:before {
  content: '';
  border-top: 2px solid white;
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 100%;
  z-index: 200;
}
h1:after {
  content: '';
  border-top: 2px solid white;
  position: absolute;
  left: -50%;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 200;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
}
.dfco h1 span {
  position: absolute;
}
.dfco h1 span:nth-child(1) {
  transform: rotate(-45deg) translate(7px, 10px);
}
.dfco h1 span:nth-child(2) {
  transform: rotate(-45deg) translate(-30px, 51px)
}
.dfco h1 span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, 84px);
}
.dfco h1 span:nth-child(4) {
  transform: rotate(-45deg) translate(42px, 49px);
}

h2, h3 {
  color: #FFF;
  font-family: 'Cutive Mono', serif;
  font-weight: normal;
  position: absolute;
  width: 146px;
  height: 146px;
  margin: -73px 0 0 -73px;
  left: 50%;
  top: 50%;
  border-radius: 50%;
}
h2 {
  box-shadow: 
    0 0 0 1px #FFF inset,
    0 0 0 4px #000 inset,
    0 0 0 5px #FFF inset;
}
h2 span, h3 span {
  background: #000;
  text-transform: uppercase;
  position: absolute;
  width: 18px;
  height: 18px;
  line-height: 18px;
  font-size: 17px;
  text-align: center;
  top: -5px;
  left: 63px;
  transform-origin: 50% 80px;
}
h3 span {
  top: 138px;
  transform-origin: 50% -60px;
}
h2 span:nth-child(1) { transform: rotate(-52deg); box-shadow: -7px 2px 0 -1px #000; }
h2 span:nth-child(2) { transform: rotate(-39deg); }
h2 span:nth-child(3) { transform: rotate(-26deg); }
h2 span:nth-child(4) { transform: rotate(-13deg); }
h2 span:nth-child(5) { transform: rotate(0deg); }
h2 span:nth-child(6) { transform: rotate(13deg); }
h2 span:nth-child(7) { transform: rotate(26deg); }
h2 span:nth-child(8) { transform: rotate(39deg); }
h2 span:nth-child(9) { transform: rotate(52deg); box-shadow: 7px 2px 0 -1px #000 ; }

h3 span:nth-child(1) { transform: rotate(71deg); box-shadow: -7px 2px 0 -1px #000;  }
h3 span:nth-child(2) { transform: rotate(58deg); }
h3 span:nth-child(3) { transform: rotate(45deg); }
h3 span:nth-child(4) { transform: rotate(32deg); }
h3 span:nth-child(5) { transform: rotate(19deg); }
h3 span:nth-child(6) { transform: rotate(5deg); }
h3 span:nth-child(7) { transform: rotate(-10deg); }
h3 span:nth-child(8) { transform: rotate(-23deg); }
h3 span:nth-child(9) { transform: rotate(-36deg); }
h3 span:nth-child(10) { transform: rotate(-49deg); }
h3 span:nth-child(11) { transform: rotate(-63deg); }
h3 span:nth-child(12) { transform: rotate(-74deg); box-shadow: 4px 2px 0 -1px #000; }

.dfco li:nth-child(1) { transform: rotate(1deg); }
.dfco li:nth-child(2) { transform: rotate(11deg); }
.dfco li:nth-child(3) { transform: rotate(21deg); }
.dfco li:nth-child(4) { transform: rotate(31deg); }
.dfco li:nth-child(5) { transform: rotate(41deg); }
.dfco li:nth-child(6) { transform: rotate(51deg); }
.dfco li:nth-child(7) { transform: rotate(61deg); }
.dfco li:nth-child(8) { transform: rotate(71deg); }
.dfco li:nth-child(9) { transform: rotate(81deg); }
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              /* changed the cross in the center from a linear background image to the pseudo-class border solution from @lucas */
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................