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

如图:
image.png
类似这样的有多个六角形组成的结构要怎样编写CSS?谢谢。

回复
阅读 1.8k
2 个回答
<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>
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏