六角形CSS排列布局应怎样实现？

Question

如图：

类似这样的有多个六角形组成的结构要怎样编写CSS？谢谢。

Answer 1

<div class="demo">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
<div class="demo">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

<style>
  .demo {
    overflow: hidden; padding: 20px;
  }
  .demo + .demo {
    margin-top: -100px;
  }
  .demo div {
    width:100px; height:160px; background:blue; float: left;  position: relative;
    margin: 0 30px;
  }
  .demo div::before{
    content:""; width:0px; position:absolute; left:-40px; top:0px;
    border:80px solid transparent; border-left:none; border-right:40px solid blue;
  }
  .demo div::after{
    content:""; width:0px; position:absolute; right:-40px; top:0px; 
    border:80px solid transparent; border-left:40px solid blue; border-right:none;
  }
  .demo div:nth-child(2n) {
    margin-top: 80px;
  }
</style>

Answer 2

直接百度

https://www.jb51.net/css/6235...

https://www.cnblogs.com/a-cat...