CSS3：骨形 [英] CSS3: Bone shape

问题描述

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

How to make a grid with dog bone format in CSS and/or jQuery? The format of bone is this:

网格看起来像这样，和
格式内的内容（图像/文本）：bone：

And the grid would look like this, just that out instead of hexagonal and the content (image/text) inside format would bone:

可以创建此格式吗？

推荐答案

以下是绘制骨骼的方法。

Here's how you draw bone.

演示

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

对于六边形网格，请按照以下教程：

And for hexagon grid, follow this tutorial:

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

这篇关于CSS3：骨形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！