---恢复内容开始---

公司有个同事调侃说，我们公司的设计那么有风格，一看就是我们公司做的，于是乎老大说，那么我们来做点不一样的吧

这便开始了我与蜂巢样式相爱相杀的故事......

 

蜂巢样式，也就是六边形，包括正六边形和非正六边形，带边框的，带阴影的，可链接的，点击范围正确的，尖角朝上的...

 

以下方法都是需要 .comb 拥有宽度才能看到效果，所以请自行加上一小段 style

.comb {    width: 100%;    max-width: 250px;    min-height: 1em;}

 

以下方法都有各自的不足，也都有内容范围和无法设置阴影方面的问题，

来一起看看吧...

 

1. 三个 div 旋转

.comb1 {    position: relative;    background-size: 0 0;    background-position: center;}.comb1:before {    content: "";    display: block;    padding-top: 86.602%;}.comb1 > * {    position: absolute;    top: 0; bottom: 0;    left: 25%; right: 25%;    background: inherit;    overflow: hidden;}.comb1 > .corner1 {    transform: rotate(60deg);}.comb1 > .corner2 {    transform: rotate(-60deg);}.comb1 > .corner1:after,.comb1 > .corner2:after {    content: "";    position: absolute;    top: 0; bottom: 0;    left: -50%; right: -50%;    background: inherit;    background-size: auto 100%;}.comb1 > .corner1:after {    transform: rotate(-60deg);}.comb1 > .corner2:after {    transform: rotate(60deg);}.comb1 > .center {    background-size:  auto 100%;}.comb1.border > * {    border: 2px solid #000;    border-left: none;    border-right: none;}

     
    
          
          
      我是内容
     

缺点：修改成非正六边形非常麻烦，无意义 dom 太多，边框不得超过 2px，失去背景图的 cover 和 contain 功能

 

2. 大背景 :after 

.comb2 {    position: relative;    overflow: hidden;    padding: .5rem 1rem;}.comb2 > .comb-bg {    position: absolute;    z-index: -1;    left: 14.6447%; right: 14.6447%;    top: 50%;    -webkit-transform: translateY(-50%) rotate(45deg);            transform: translateY(-50%) rotate(45deg);    -webkit-transform-origin: center;            transform-origin: center;    background: #ddd;}.comb2 > .comb-bg:before {    content: "";    display: block;    padding-top: 100%;}

     
    
      
    
      我是内容
     

缺点：无法设置边框，点击范围不正确

 

3. clip-path

.comb3 {    position: relative;    -webkit-clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);            clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);}.comb3 {    text-align: center;}.comb3:before {    content: "";    display: block;    padding-top: 86.602%;}.comb3:after {    content: "";    position: absolute;    top: 0; bottom: 0;    left: 0; right: 0;    -webkit-clip-path: inherit;    clip-path: inherit;    background: #fff;}.comb3 > .comb-wrap {    position: absolute;    z-index: 1;    top: 0; bottom: 0;    left: 0; right: 0;}.comb3.border {    background: #aaa;}.comb3.border:after {    margin: 5px;}.comb3.shadow {    -webkit-filter: blur(3px);    filter: blur(3px);}

     
    
      
       我是内容
      
     

缺点：兼容性可能会出问题，点击范围不对

 

4. svg

.comb3 {    position: relative;}.comb3:before {    content: "";    display: block;    padding-top: 86.602%;}.comb3 > svg {    position: absolute;    top: 0; bottom: 0;    left: 0; right: 0;}.rect_bg {    clip-path: url(#rect);}

缺点：非正六边形难搞， 学习成本较高，包含的内容那就麻烦了

 

5. 用图片作背景

.comb5 {    position: relative;}.comb5:before,.comb5:after {    content: "";    position: absolute;    z-index: -1;    top: 0; bottom: 0;    width: 50%;    background-image: url(http://192.168.1.129/Content/img/comb.png);    background-size: auto 400%;    background-repeat: no-repeat;}.comb5:before {    left: 0;}.comb5:after {    right: 0;}.comb5.style1:before {    background-position: 0 0;}.comb5.style1:after {    background-position: 100% 0;}.comb5.style2:before {    background-position: 0 33.333%;}.comb5.style2:after {    background-position: 100% 33.333%;}.comb5.style3:before {    background-position: 0 66.666%;}.comb5.style3:after {    background-position: 100% 66.666%;}.comb5.style4:before {    background-position: 0 100%;}.comb5.style4:after {    background-position: 100% 100%;}

     
      我是内容
     
     
      我是内容
     
     
      我是内容
     
     
      我是内容
     

缺点：正六边形难搞，元素宽度不得超过图片宽度，点击范围不对，图像可能有噪点

 

需求是无穷的，程序也是无限量的