css、less以简单的方式，绘制六边形

效果图

简介

相比网上其它的方式，多了可以自定义外阴影，以及封装了css函数，方便调用和复用。标签主要用于覆盖外阴影造成的内部阴影。

代码块

html

<ul>
  <li>
    <i></i>
    <div class="box">123</div>
  </li>
</ul>
           

less

ul {
    li{
      position: relative;
      width: 65px;
      height: 105px;
      margin-left: 24px;
      margin-bottom: 20px;
      margin-right: 18px;
      .box{
        .hexagon(60px, 105px, transparent, 0 0 15px rgba(0,0,0,0.20));
      }
      i{
        .hexagon(60px, 105px, #fff, none);
        top: 0;
        left: 0;
        z-index: 1;
        &:hover{
          .hexagon(60px, 105px, red, 0px 5px 8px 0px rgba(249, 6, 0, 0.25));
        }
      }
    }
  }
  .hexagon(@width, @height, @background-color, @box-shadow){
    position: absolute;
    display: block;
    float: left;
    width: @width;
    height: @height;
    background: @background-color;
    transform: rotate(30deg);
    margin: 10px 0;
    box-shadow:@box-shadow;
    outline:none;
  
    &:before{
      content: "";
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      transform: rotate(-60deg);
      background: @background-color;
      box-shadow:@box-shadow;
    }
  
    &:after{
      content: "";
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      transform: rotate(60deg);
      background: @background-color;
      box-shadow:@box-shadow;
    }
  }