CSS 实现嵌套六边形边框

CSS 实现嵌套六边形边框

---

1. 期望输出

2. 原理

   即三个六边形组合而成。

   而六边形原理为：一个矩形加上下俩三角形。

3. 实现

   1. HTML

   <div class="hex">
       <div class="hex inner">
           <div class="hex inner2"></div>
       </div>
   </div>
   

   2. CSS

   .hex {
       margin-top: 70px;
       width: 208px;
       height: 120px;
       background: grey;
       position: relative;
   }
   .hex:before, .hex:after {
       content:"";
       border-left: 104px solid transparent;
       border-right: 104px solid transparent;
       position: absolute;
   }
   .hex:before {
       top: -59px;
       border-bottom: 60px solid grey;
   }
   .hex:after {
       bottom: -59px;
       border-top: 60px solid grey;
   }
   .hex.inner {
       background-color:white;
       -webkit-transform: scale(.8, .8);
       -moz-transform: scale(.8, .8);
       transform: scale(.8, .8);
       z-index:1;
   }
   .hex.inner:before {
       border-bottom: 60px solid white;
   }
   .hex.inner:after {
       border-top: 60px solid white;
   }
   .hex.inner2 {
       background-color:grey;
       -webkit-transform: scale(.8, .8);
       -moz-transform: scale(.8, .8);
       transform: scale(.8, .8);
       z-index:2;
   }
   .hex.inner2:before {
       border-bottom: 60px solid grey;
   }
   .hex.inner2:after {
       border-top: 60px solid grey;
   }