css3的clip-tath裁剪出正六边形

首先，这是图，能看到那几个正六边形吗？看不到自己想象一个，

然后，我想直接在网上搜一个，结果我看到了各种旋转什么overflow:hidden;

擦，需要这么复杂吗，不就画个多边形吗，于是我想起了前两天用到了，clip-path，这玩意儿很厉害，想怎么画就怎么画，说不定可以画个女朋友出来

于是我在本子上画了个正六边形，粗略的计算了他们的点和边长的关系，大概长这样

可以看出来，非常简单，核心知识就是股沟定理，额勾股，

愚蠢的我居然算了每个点的值，猛然发现用比例不就行了吗，

最后我撸出了这样的代码

页面html

<div class="liubianxing"></div>

css代码（用的less,不懂得十分钟了解一下？）

.liubianxing{
      @myHeight:300px;//以高度为准定义变量，为什么要定义？你喜欢大的直接改就行了，你喜欢的话还可以让他旋转，怎么感觉怪怪的
      @genHaoSan:1.73205080;//根号三的接近值
      width: calc(~'@{genHaoSan} * @{myHeight} / 2');//（calc是计算的意思，计算英语calculate）宽是高度的二分之根号三，为什么？看我上面草稿
      height: @myHeight;
      clip-path: polygon(
        //polygon就是多边形的意思，具体参数自行百度一下，以下为六边形六个点的坐标
        0 25%,
        50% 0,
        100% 25%,
        100% 75%,
        50% 100%,
        0 75%
      );
      background: #dedede;
    }

搞定，上图，就问一句正不正，六不六

最后，分享一个小资源，可以在线生成你想要的形状，不过我有时候打不开，有兴趣的可以看一下

点击打开链接