CSS3：骨骼形状

Question

  

如何在CSS和/或jQuery中使用dog bone格式制作网格？该   骨骼的格式是：

  

并且网格看起来像这样，而不是六边形和内部（图像/文本）   格式是骨头：   

     

可以创建这种格式吗？

Answer 1

以下是绘制骨骼的方法。

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;
}

对于六边形网格，请遵循以下教程：

http://jtauber.github.io/articles/css-hexagon.html