css - CSS3：骨骼形状

Question

如何在 CSS 和/或 jQuery 中使用狗骨格式制作网格？骨骼的格式是这样的：

网格看起来像这样，只是那个而不是六边形，格式内部的内容（图像/文本）会骨：

可以创建这种格式吗？

Answer 1

这是绘制骨骼的方法。

演示

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