CSS3: Форма кости

Question

Как создать сетку с форматом кости собаки в CSS и/или jQuery? Формат кости это:

И сетка будет выглядеть так, только что вышел вместо шестиугольной и содержание (изображение/текст) в формате бы кости:

Этот формат можно создать?

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