CSS3: Knochen Form

Wie man ein Netz mit dem dog bone-format in CSS und/oder jQuery? Die
format der Knochen ist dies:

CSS3: Knochen Form

Und das Netz würde dann so Aussehen, nur dass anstatt der Sechskantschrauben und der Inhalt (Bild/text) von innen
format würde Knochen:

Ist es möglich mit diesem format?

Sie könnten in der Lage sein, dies zu tun, wenn Sie klug mit radialen Farbverläufen...
Nicht sicher ob trolling oder nicht ... hmm 😀
für ein hexagon-raster, sehen Sie möglicherweise die pen : codepen.io/web-tiki/pen/HhCyd

InformationsquelleAutor Tim Vitor | 2013-06-08

Hier ist, wie Sie ziehen in den Knochen.

Demo

HTML

<div class="bone">
    <div class="s1"></div>
    <div class="s2"></div>
    <div class="s3"></div>
    <div class="s4"></div>
    <div class="centerbone">
      <div class="clean"></div>
    </div>
</div>

CSS

.bone{
  position: relative;
  width: 600px;
}
.s1, .s2, .s3, .s4{
  background:#fff;
  height: 200px;
  width: 200px;
  border: 5px solid #000;
  border-radius: 200px;
  position:absolute;
}
.s1{
  left: 0;
}
.s2{
  right: 0;
}
.s3{
  top: 205px;
}
.s4{
  right: 0;
  top:205px;
}
.centerbone{
  background:#fff;
  height: 250px;
  width: 188px;
  border: 5px solid #000;
  position:absolute;  
  left: 205px;
  top: 78px;
  border-width: 5px 0 5px;
}
.clean{
  background:#fff;
  width: 400px;
  height:100%;
  position: absolute;
  left:-104px;
}