CSS3: forme d'Os

Comment faire une grille avec des os de chien format CSS et/ou jQuery? L'
format de l'os est ceci:

CSS3: forme d'Os

Et la grille de la regarder comme ça, juste qu'au lieu de hexagonales et le contenu (texte/image) à l'intérieur de
le format de l'os:
CSS3: forme d'Os

Il est possible de créer ce format?

  • Vous pourriez être en mesure de faire cela que si vous êtes à l'aise avec les dégradés radiaux...
  • Vous ne savez pas si la pêche à la traîne ou pas ... hmm 😀
  • pour une grille hexagonale, vous pouvez voir le pen : codepen.io/web-tiki/stylo/HhCyd
InformationsquelleAutor Tim Vitor | 2013-06-08
  1. 3

    Voici comment vous tirer de l'os.

    Démo

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

    Et pour la grille hexagonale, suivez ce tutoriel:

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

    InformationsquelleAutor Rajender Joshi